Question

翻译（NaN时，NAN）。在第4节：

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：

在调用需要node.value
的分层布局之前，必须调用node.sum或node.count

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

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

以下是使用sum()的代码，请检查控制台：

＆＃13;

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);

＆＃13;

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

＆＃13;

D3。数据问题

1 个答案: