D3 Bubble Chart 'bubble.nodes не функция'

Question

Я следую учебнику Майка Бостока here, чтобы создать пузырьковую диаграмму ... кроме того, что я использую свой собственный набор данных, и я использую d3 v4. Я довольно новичок в d3, и я понимаю, что многое изменилось в v4 с v3. У меня возникли проблемы с преобразованием кода примера в v4.

Например, я превратил этот код в d3 v3:

var bubble = d3.layout.pack() 
    .sort(null) 
    .size([diameter, diameter]) 
    .padding(1.5); 

к:

var bubble = d3.pack(dataset) 
     .size([diameter, diameter]) 
     .padding(1.5); 

ли выше правильно? Я не уверен, так как до сих пор у меня нет ошибок.

Но я получаю сообщение об ошибке в следующем фрагменте кода:

var node = svg.selectAll(".node") 
     .data(
      bubble.nodes(root) 
      .filter(function(d) { 
       return !d.children; 
      }) 
     ) 
     .enter() 
     .append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; 
     }); 

с bubble.nodes is not a function. Что эквивалентно в d3 v4?

Fiddle: https://jsfiddle.net/r24e8xd7

Answer 1

Ваша обновленная скрипка: https://jsfiddle.net/r24e8xd7/9/.

Корневой узел должен быть построен с использованием d3.hierarchy:

var nodes = d3.hierarchy(dataset) 
      .sum(function(d) { return d.responseCount; }); 

Затем пакет макет можно назвать:

var node = svg.selectAll(".node") 
      .data(bubble(nodes).descendants()) 

Answer 2

Сравнивая различные документы, v3

# упаковка (корень)
# pack.nodes (корень)

Запускает макет пакета, возвращая массив узлов, связанных с указанным корневым узлом . Раскладка кластера является частью семейства D3 иерархических макетов . Эти макеты соответствуют одной и той же базовой структуре: входной аргумент макета - корневой узел иерархии, , а возвращаемое значение вывода - это массив, представляющий вычисленные позиции всех узлов. На каждом узле заполняются несколько атрибутов:

• parent - родительский узел или нуль для корня.
• дочерний массив дочерних узлов, или нуль для листовых узлов.
• value - значение узла, возвращаемое атрибутом value.
• глубина - глубина узла, начиная с 0 для корня.
• x - вычисленная координата x позиции узла.
• y - вычисленная y-координата положения узла.
• r - радиус вычисленного узла.

к новой v4

# упаковка (корень) <>

Раскладывает указанную корневую иерархию, назначив следующие свойства на корню и его потомков:

• node.x - х-координата центра круга
• node.y - у-координату центра круга
• node.r - радиус окружности

Вы должны вызвать корень .sum перед передачей иерархии в пакет макет. Вероятно, вы также захотите вызвать root.sort, чтобы заказать иерархию перед вычислением макета.

похоже, что pack() - это то, что вы ищете, но похоже, что вам может потребоваться изменение или два, прежде чем вы это сделаете.

обновление
Быстрый взгляд на разные вещи, и есть несколько вещей происходит, что его не просто исправить.

• Ваши данные полностью отличаются от примера и являются плоскими, что приводит к изменению диаграммы .

• Почему бы не использовать v3? Большинство примеров из них есть в v3 и, как и вы, сказали, что вы новичок в d3. почему все сложно.

• Окончательно начинайте с малого. Я бы предложил сначала сначала найти небольшой пузырь , а затем сделать свой путь вверх или заменить ваши данные на пример кода и получить эту работу, а затем пошаговое изменение вместо того, чтобы пытаться изменить сразу несколько вещей.