PROSAGA码农传奇-JS-Voronoi单元在力导向布局中是不规模的

<div class =“post-text”itemprop =“text”>
  <P>
    问题在于：
  </p>
   <pre>
    <code>
      node.attr('transform', function(d) { return `translate(${d.x}, ${d.y})`; });

</code>
  </pre>
  <P>
    正如您所看到的，您正在应用翻译
     <code>
      node
    </code>
     组。这本身并不是问题。问题是那些相同的组包含Voronoi路径。因此，当您稍后更改Voronoi坐标时...
  </p>
   <pre>
    <code>
      node.select("path")
    .data(voronoi.polygons(nodes))
    .attr("d", function(d) { return d == null ? null : "M" + d.join("L") + "Z";
});

</code>
  </pre>
  <P>
    ...您正在已经翻译的组内的路径上应用坐标。
  </p>
  <P>
    的<strong>
      解
    </强>
    ：有许多不同的解决方案，例如为Voronoi路径创建不同的组。但是，这里最简单的解决方案是将翻译应用于圈子，而不是应用于包含组：
  </p>
   <pre>
    <code>
      node.select("circle").attr('transform', function(d) {
    return `translate(${d.x}, ${d.y})`;
});

</code>
  </pre>
  <P>
    以下是仅包含此更改的代码：
  </p>
  <P>
  </p>
  <div class =“snippet”data-lang =“js”data-hide =“true”data-console =“true”data-babel =“false”>
    <div class =“snippet-code snippet-Currently-hidden”>
       <pre class="snippet-code-js lang-js prettyprint-override">
        <code>
          const svg = d3.select('#voronoiSvg');
const transform = d3.zoomIdentity;
const width = 600;
const height = 300;
let node, link, simulation, root, voronoi, nodes;
let i = 0;

function loadVoronoi() {
  const data = {
    "name": "flare",
    "children": [{
      "name": "analytics",
      "children": [{
          "name": "cluster",
          "children": [{
              "name": "AgglomerativeCluster",
              "size": 3938
            },
            {
              "name": "CommunityStructure",
              "size": 3812
            },
            {
              "name": "HierarchicalCluster",
              "size": 6714
            },
            {
              "name": "MergeEdge",
              "size": 743
            }
          ]
        },
        {
          "name": "graph",
          "children": [{
              "name": "BetweennessCentrality",
              "size": 3534
            },
            {
              "name": "LinkDistance",
              "size": 5731
            },
            {
              "name": "MaxFlowMinCut",
              "size": 7840
            },
            {
              "name": "ShortestPaths",
              "size": 5914
            },
            {
              "name": "SpanningTree",
              "size": 3416
            }
          ]
        },
        {
          "name": "optimization",
          "children": [{
            "name": "AspectRatioBanker",
            "size": 7074
          }]
        }
      ]
    }]
  }
  root = d3.hierarchy(data);

svg
    .attr("width", width)
    .attr("height", height)
    .on('dblclick.zoom', null);

simulation = d3.forceSimulation()
    .force('link', d3.forceLink().id(function(d) {
      return d.id;
    }))
    .force('charge', d3.forceManyBody().strength(-10).distanceMax(300))
    .force('center', d3.forceCenter(width / 2, height / 2))
    .alphaTarget(1)
    .on('tick', ticked);

voronoi = d3.voronoi()
    .x(function(d) {
      return d.x;
    })
    .y(function(d) {
      return d.y;
    })
    .extent([
      [-1, 1],
      [width + 1, height + 1]
    ]);

update(root);
}

function update(root) {
  nodes = flatten(root);
  const links = root.links();

//links
  link = svg.selectAll('.link')
    .data(links, function(d) {
      return d.target.id;
    });
  link.exit().remove();
  const linkEnter = link.enter()
    .append('line')
    .attr('class', 'link')
    .style('stroke', '#132')
    .style('opacity', '1')
    .style('stroke-width', 2);
  link = linkEnter.merge(link);

//nodes
  node = svg.selectAll('.node')
    .data(nodes, function(d) {
      return d.id;
    });
  node.exit().remove();
  const nodeEnter = node.enter()
    .append('g')
    .attr('class', 'node')
    .attr('stroke', '#666')
    .attr('stroke-width', 2)
    .style('fill', color)
    .style('opacity', 1)
    .on('click', clicked);
  nodeEnter.append('circle')
    .attr("r", 8)
    .style('text-anchor', function(d) {
      return d.children ? 'end' : 'start';
    })
    .text(function(d) {
      return d.data.name;
    });
  nodeEnter.append("path").attr("class", "path");
  nodeEnter.call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));
  node = nodeEnter.merge(node);

simulation.nodes(nodes);
  simulation.force('link').links(links);
  // simulation.alpha(1).restart();
}

function color(d) {
  return d._children ? "#51A1DC" // collapsed package
    :
    d.children ? "#51A1DC" // expanded package
    :
    "#F94B4C"; // leaf node
}

function radius(d) {
  return d._children ? 8 :
    d.children ? 8 :
    4;
}

node.select("circle").attr('transform', function(d) {
    return `translate(${d.x}, ${d.y})`;
  });

node.select("path")
    .data(voronoi.polygons(nodes))
    .attr("d", function(d) {
      return d == null ? null : "M" + d.join("L") + "Z";
    });
}

function clicked(d) {
  if (!d3.event.defaultPrevented) {
    if (d.children) {
      d._children = d.children;
      d.children = null;
    } else {
      d.children = d._children;
      d._children = null;
    }

console.log("clicked");
    update(root);
  }
}

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;
}

function flatten(root) {
  const nodes = [];

function recurse(node) {
    if (node.children) node.children.forEach(recurse);
    if (!node.id) node.id = ++i;
    else
      ++i;
    nodes.push(node);
  }
  recurse(root);
  return nodes;
}

function zoomed() {
  svg.attr('transform', d3.event.transform);
}

loadVoronoi();
        </code>
      </pre>
       <pre class="snippet-code-css lang-css prettyprint-override">
        <code>
          .node circle {
  cursor: pointer;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
  text-anchor: middle;
}

line.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

path {
  pointer-events: all;
  fill: none;
  stroke: #666;
  stroke-opacity: 0.2;
}

.active path {
  fill: #111;
  opacity: 0.05;
}

svg {
  border: 1px solid #888;
}
        </code>
      </pre>
       <pre class="snippet-code-html lang-html prettyprint-override">
        <code>
          <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="list-group voronoi_treemap" id="voronoiPanel">
  <svg id="voronoiSvg"></svg>
</div>
        </code>
      </pre>
    </DIV>
  </DIV>
  <P>
  </p>
</DIV>