d3.js - несколько диаграмм на одной странице из разных частей того же объекта JSON

Question

Я искал по всему миру, и я не мог понять, что не так с моим кодом. Извиняюсь, если я упускаю что-то очевидное.

У меня есть объект JSON следующим образом:

var data={ 
    "by_date":[ 
     {"date":"2014-01-01", "count":10}, 
     {"date":"2014-02-01", "count":20}, 
     {"date":"2014-03-01", "count":30}, 
     {"date":"2014-04-01", "count":15}, 
     {"date":"2014-05-01", "count":20} 
    ], 
    "by_location": { 
     "name":"World","children":[ 
      { 
       "name":"United States", "children":[{"name":"New York", "children":[{"name":"Albany","count":5}, {"name":"NYC","count":5}]}] 
      }, 
      { 
       "name":"Canda", "children":[ 
        { 
         "name":"Alberta", "children":[{"name":"Edmonton","count":5},{"name":"Calgary","count":5}] 
        }, 
        { 
         "name":"British Columbia", "children":[{"name":"Victoria","count":2},{"name":"Vancouver","count":8}] 
        } 
       ] 
      }, 
      { 
       "name":"China", "children":[{"name":"Beijing","count":30}] 
      }, 
      { 
       "name":"India", "children":[{"name":"Bangalore","count":15}] 
      }, 
      { 
       "name":"Germany", "children":[{"name":"Frankfurt","count":20}] 
      } 
     ] 
    } 
}; 

Я хочу, чтобы отобразить диаграмму линии, используя данные из data.by_date и масштабируемой circlepack из data.by_location на той же странице HTML. У меня есть две функции Javascript by_date, который создает линейную диаграмму, и by_location, который создает circlepack, и они оба имеют один и тот же код, что и линия диаграммы и масштабируемой circlepack примеры Майка Босток и я называю их следующим образом:

by_date(data.by_date); 
by_location(data.by_location); // Creates circlepack, but zoom doesn't work. 

Проблема заключается в том, что, хотя и линейная диаграмма, и круглый пакет создаются и отображаются на странице, функция масштабирования не работает на круглом пакете. Я получаю следующее сообщение об ошибке:

Uncaught TypeError: Cannot read property 'parent' of undefined 

Однако, если я не называю by_date и вызывать только by_location, он отлично работает.

//by_date(data.by_date); 
by_location(data.by_location); // Zoom works great now! 

Поскольку by_date использует только data.by_date, и даже не касается data.by_location, почему бы комментировать это как-то сделать by_location работу хорошо?

Вот фидель демонстрирующего вопрос:

Обе линии и circlepack (circlepack не увеличить): http://jsfiddle.net/xk5aqf8t/6/

Line Функциональной схема by_date прокомментировал (увеличение работает нормально): http://jsfiddle.net/38sayeqa/

Обратите внимание, что только Разница между двумя скриптами - это прокомментированный звонок by_date.

Любая помощь очень ценится. Заранее спасибо!

Answer 1

Проблема в вашем случае заключается в том, что в вашем преобразовании масштабирования вы выбираете все элементы text в документе, включая линейную диаграмму, в которой привязанные данные элементов не имеют никакого свойства parent (следовательно, сообщение об ошибке).

Исправить легко. Просто ограничьте свой переходный переход на текущий график. В вашем случае у вас уже есть выбор элементов текста, вы можете просто использовать его, как показано ниже:

// Let's keep our initial selection in the text variable: 
var text = svg.selectAll('text').data(nodes); 
text.enter()... // the entering selection is a subselection, so we keep it separate 

// Create a new transition on the existing selection of text nodes 
var transition = text.transition().duration(...); // the transition will reuse `text` selection 
transition.filter(...); // don't subselect anything here 

Вот demo.