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性能，你必須在d3.hierarchy()功能傳遞給sum()。

按照API：

必須調用node.sum或node.count調用分層佈局，需要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>