5

要素を適切にグループ化したかどうかはわかりませんが、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;
         });
4

1 に答える 1