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 和 .值。

如果我将 .nodes() 参数更改为 datagraph.children，我会在 nodes() 迭代中一次获取一个元素，但奇怪的是我会得到一个 <g> 对象。由于我不需要展平层次结构，因此在示例中我跳过了 classes(root) 函数。我想知道 packageName 属性是否在 nodes() 中起作用？

我该如何解决这个问题？

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.

d3.js 打包气泡图元素

d3.js packing bubble chart elements

javascript

layout

d3.js