javascript - 強制的に有向グラフ ノードが中心にくっつくようにする

Question

この質問からフォローアップした後、D3チャートの円内にテキストを挿入します

ノードが中心にくっついています。ノードとその x 座標と y 座標を指示しているプロパティがわかりません。最近g、円にレイヤーを追加するようにコードを変更して、図形と共にテキストを追加できるようにしました。

データ

https://api.myjson.com/bins/hwtj0

更新されたコード

    async function d3function() {
        d3.selectAll("svg > *").remove();

        const svg = d3.select("svg");
        file = document.getElementById("selectFile").value;
        console.log("File: " + file)
        var width = 900
        var height = 900 
        svg.style("width", width + 'px').style("height", height + 'px');

        data = (await fetch(file)).json()
        d3.json(file).then(function(data) {

            const links = data.links.map(d => Object.create(d));
            const nodes = data.nodes.map(d => Object.create(d));
            console.log(links.length);
            console.log(nodes.length);
            const simulation = forceSimulation(nodes, links).on("tick", ticked);

            var categorical = [
              { "name" : "schemeAccent", "n": 8},
              { "name" : "schemeDark2", "n": 8},
            ]
            // var colorScale = d3.scaleOrdinal(d3[categorical[6].name])

            var color = d3.scaleOrdinal(d3[categorical[1].name]);


            var drag = simulation => {

                  function dragstarted(d) {
                    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
                    d.fx = d.x;
                    d.fy = d.y;
                  }

                  function dragged(d) {
                    d.fx = d3.event.x;
                    d.fy = d3.event.y;
                  }

                  function dragended(d) {
                    if (!d3.event.active) simulation.alphaTarget(0);
                    d.fx = null;
                    d.fy = null;
                  }

                  return d3.drag()
                      .on("start", dragstarted)
                      .on("drag", dragged)
                      .on("end", dragended);
            }

            const link = svg.append("g")
                  .attr("stroke", "#999")
                  .attr("stroke-opacity", 0.6)
                .selectAll("line")
                .data(links)
                .enter().append("line")
                  .attr("stroke-width", d => Math.sqrt(d.value));

            // link.append("title").text(d => d.value);

            // var circles = svg.append("g")
            //       .attr("stroke", "#fff")
            //       .attr("stroke-width", 1.5)
            //     .selectAll(".circle")
            //     .data(nodes)

            // const node = circles.enter().append("circle")
            //       .attr("r", 5)
            //       .attr("fill", d => color(d.group))
            //       .call(drag(simulation));

            const node = svg.append("g")
                  .attr("stroke", "#fff")
                  .attr("stroke-width", 1.5)
                  .selectAll("circles")
                  .data(nodes)
                  .enter()
                .append("g")
                .classed('circles', true)
                .attr('transform', d => 'translate(' + d.x + ',' + d.y + ')');

                node.append("circle")
                .classed('circle', true)
                .attr("r", 5)
                .attr("fill", d => color(d.group))
                .call(drag(simulation));

                node
                  .append("text")
                  .classed('circleText', true)
                  .attr('dy', '0.35em')
                  .attr('dx', 5)
                  .text(d => "Node: " + d.id);

            node.append("title").text(d => "Node: " + d.id);

            function ticked() {
                link
                    .attr("x1", d => d.source.x)
                    .attr("y1", d => d.source.y)
                    .attr("x2", d => d.target.x)
                    .attr("y2", d => d.target.y);

                node
                    .attr("cx", d => d.x)
                    .attr("cy", d => d.y);
            }

        });

    }



    function forceSimulation(nodes, links) {
      return d3.forceSimulation(nodes)
          .force("link", d3.forceLink(links).id(d => d.id))
          .force("charge", d3.forceManyBody())
          .force("center", d3.forceCenter());
    }

更新された出力

期待される出力

更新された HTML

<g stroke="#fff" stroke-width="1.5">
   <g class="circle" cx="-35.89111508769784" cy="131.13965804447696">
      <circle class="circle" r="5" fill="#1b9e77"></circle>
      <text class="circleText" dy="0.35em" dx="5">Node: 0</text>
      <title>Node: 0</title>
   </g>
   <g class="circle" cx="70.97799024729613" cy="-195.71408429254427">
      <circle class="circle" r="5" fill="#d95f02"></circle>
      <text class="circleText" dy="0.35em" dx="5">Node: 3</text>
      <title>Node: 3</title>
   </g>
   [....]
  </g>