d3.js элементы пузырьковой упаковки

Question

Я пытаюсь использовать пример пузырьковой диаграммы в качестве шаблона для создания визуализации. У меня есть JSON как плоская иерархия, так что есть один элемент с именем children и который содержит массив объектов, которые я хочу визуализировать.

JSON выглядит следующим образом:

{ 
    "children":[ 
    { 
     "acc":"Q15019", 
     "uid":"SEPT2_HUMAN", 
     "sym":"SEPT2", 
     "name":"Septin-2", 
     "alt_ids":"", 
     "ratio":0.5494271087884398, 
     "pval":0.990804718 
    }, 
    ..., 
    { 
     "acc":"Q16181", 
     "uid":"SEPT7_HUMAN", 
     "sym":"SEPT7", 
     "name":"Septin-7", 
     "alt_ids":"", 
     "ratio":1.1949912048567823, 
     "pval":0.511011887 
    } 
    ] 
} 

Я изменил пример кода следующим образом:

var diameter = 960, 
    format = d3.format(",d"), 
    color = d3.scale.quantile().range(colorbrewer.RdBu[9]); 

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

var svg = d3.select("body").append("svg") 
    .attr("width", diameter) 
    .attr("height", diameter) 
    .attr("class", "bubble"); 

d3.json("datagraph.json", function(datagraph) { 
    var node = svg.selectAll(".node") 
     .data(bubble.nodes(datagraph)) 
    .enter().append("g") 
     .attr("class", "node") 
     .attr("id", function(d) { return d.acc; }) 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    //node.append("title").text(function(d) { return d.className + ": " + format(d.value); }); 

    node.append("circle") 
     .attr("r", function(d) { return 30; }) 
     .style("fill", function(d) { 
     if(d.ratio == null) 
      return "#ffffff"; 
     else 
      return color(d.ratio); 
     }); 

    node.append("text") 
     .attr("dy", ".3em") 
     .style("text-anchor", "middle") 
     .text(function(d) { return d.acc; }); 
}); 

Полученный HTML имеет массу <g> тегов реагирующих на каждый элемент, кроме них никогда переведенные в правильное положение, но вместо этого они сидят друг над другом в верхнем левом углу. Изучив Firebug, я понял, что это происходит, по-видимому, потому, что алгоритм pack() не получает объекты по одному, а весь массив как один элемент, поэтому отдельные элементы не получают значений .x и .y.

Если изменить .nodes() аргумент datagraph.children я получаю элементы по одному в узлах() итерации, но как ни странно я получаю один <g> объект. Так как мне не нужно сгладить иерархию, я пропустил функцию classes(root) в примере. Мне интересно, имеет ли атрибут packageName какую-либо роль в узлах()?

Как решить эту проблему?

Answer 1

Вы не указали value accessor:

var bubble = d3.layout.pack() 
    .sort(null) 
    .size([diameter, diameter]) 
    .padding(1.5) 
    .value(function(d) { return d.pval; }) //<- must return a number 

here Пример.