javascript - D3。数据问题

Question

翻译(NaN,NaN)。在 v4 中:

var bubble = d3.pack()
    .size([diameter, diameter])
    .padding(2);
var root = d3.hierarchy({"children": data.values})
console.log(bubble(root).children);
var node = svg.selectAll(".node")
              .data(bubble(root).children)
              .enter().append("g")
              .attr("class", "node")
              .attr("transform", function (d) { return "translate(" + [d.x, d.y] + ")"; });

在 v3 中正确:

var bubble = d3.layout.pack()
               .sort(null)
               .size([diameter, diameter])
               .padding(2);
var root = {"children": data.values}
console.log(bubble.nodes(root).children);
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 + ")"; });

在 v3 控制台中，“r”有一个值。但在 v4 中则不然。我认为这是数据导入的问题。

Answer 1

要拥有 x、y 和 r 属性，您必须将函数传递给 sum() 在 d3.hierarchy() 中。

根据API :

You must call node.sum or node.count before invoking a hierarchical layout that requires node.value

由于我不知道您的数据结构，因此我创建了这个虚拟数组:

var data = {
    children: [{
        name: "foo",
        size: 50
    }, {
        name: "bar",
        size: 20
    }, {
        name: "baz",
        size: 40
    }]
};

这是使用 sum() 的代码，请检查控制台:

var data = {
    children: [{
        name: "foo",
        size: 50
    }, {
        name: "bar",
        size: 20
    }, {
        name: "baz",
        size: 40
    }]
};

var diameter = 500;

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

var root = d3.hierarchy(data)
    .sum(function(d) {
        return d.size;
    });;

console.log(bubble(root).children);

<script src="https://d3js.org/d3.v4.min.js"></script>