要素を適切にグループ化したかどうかはわかりませんが、d3 のレイアウトは次のようになります。
var circleGroup = svg.selectAll("g")
.data(nodeList)
.enter()
.append("g")
これにより、一連のグループが作成されます。各グループに円が必要です。
circleGroup.append("circle")
.attr("cx", function(d,i){
return coordinates[i][0];
})
.attr("cy", function(d,i){
return coordinates[i][1];
})
.attr("r", function(d){
return 10;
})
.attr("fill", "white");
データ自体には実際には座標データがないため、それらを動的に円形に配置し、インデックスに基づいて配置するだけです。また、いくつかのラベルを追加します。ここで座標[i][0]を繰り返しますが、円の「cx」および「cy」属性にアクセスする方法はありますか? d3.select(this) のいくつかの形式を試しましたが、何も得られません。
circleGroup.append("text")
.attr("x", function(d,i){
return coordinates[i][0];
})
.attr("y", function(d,i){
return coordinates[i][1];
})
.style("text-anchor","middle")
.text(function(d,i){
return d;
});