私はマイク・ボストックのチュートリアルを以下のよ、ここで私は自分のデータセットを使用していると私はD3 V4を使用していることを除いて...バブルチャートを作成します。私はd3を初めて使用し、v4ではv3から多くの変更があったことを理解しています。サンプルコードをv4に変換するのに問題があります。
たとえば、私はこのコードをd3v3で変換しました。
var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);
に：
var bubble = d3.pack(dataset)
.size([diameter, diameter])
.padding(1.5);
上記は正しいですか？この時点までエラーが発生していないのでわかりません。
しかし、次のコードでエラーが発生します。
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 + ")";
});
でbubble.nodes is not a function。d3 v4で同等のものは何ですか？
更新されたフィドルは次のとおりです：https：//jsfiddle.net/r24e8xd7/9/。
ルートノードは、d3.hierarchyを使用して構築する必要があります。
var nodes = d3.hierarchy(dataset)
.sum(function(d) { return d.responseCount; });
次に、パックレイアウトを呼び出すことができます。
var node = svg.selectAll(".node")
.data(bubble(nodes).descendants())
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加