D3。データの問題

Question

Translate（NaN、NaN）正しくv3では

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] + ")"; }); 

：v4のでは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 + ")"; }); 

、 "r" は値を持っています。しかしv4ではそうではありません。データのインポートには問題があると思います。

Answer 1

x、yとr特性を有するためには、d3.hierarchy()にsum()に関数を渡す必要があります。

APIによると：私はの構造を知らないとあなたは

node.value必要と階層的なレイアウトを呼び出す前に、node.sumまたはnode.count呼び出す必要があります

ここで

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>