时间戳

首页 > 解决方案 > 在 canvas.scale 调用后 D3 强制布局（Canvas）性能下降

performance - 在 canvas.scale 调用后 D3 强制布局（Canvas）性能下降

问题描述

我遇到了非常奇怪的性能问题。. . 我使用 d3 力图可视化网络中的一些关系，为了实现缩放，我使用 d3-zoom。当 d3.zoomIdentity.k > 1 时，性能会显着下降，我不知道为什么！:( Chrome 性能配置文件截图

正如您在性能配置文件的屏幕截图中看到的那样，在滚动（紫线）（放大，k 变为> 1）之后，帧渲染时间和任务（灰线）时间立即增加。

您可以像这样重现它： 1. 打开 Index.html 2. 拖动一些节点并检查 fps（视觉） 3. 放大，现在你可以看到病态的性能下降 4. 缩小，一切都很好 :shrug:

这是代码（index.html）：

<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
  .edge {
    stroke: white;
    stroke-width: 1;
  }

  .graphSVG {
    background-color: black;
  }

  div.container {
    width: 100%;
    border: 1px solid gray;
  }

  div.tooltip {
    position: absolute;
    text-align: center;
    width: 180px;
    padding: 2px;
    font: 12px sans-serif;
    background: lightsteelblue;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
  }
</style>

<body>
  <div id="graphDiv"></div>

  <script>
    var radius = 5;

    var defaultNodeCol = "white",
      highlightCol = "yellow";

    var height = window.innerHeight;
    var graphWidth = window.innerWidth;

    var graphCanvas = d3.select('#graphDiv').append('canvas')
      .attr('width', graphWidth)
      .attr('height', height)
      .node();

    var context = graphCanvas.getContext('2d');
    graphCanvas.style.backgroundColor = "white";

    var div = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);

    var simulation = d3.forceSimulation()
      .force("link", d3.forceLink().id(function (d) { return d.id; }))
      .force("center", d3.forceCenter(graphCanvas.width / 2, graphCanvas.height / 2))
      .force("x", d3.forceX(graphCanvas.width / 2).strength(0.2))
      .force("y", d3.forceY(graphCanvas.height / 2).strength(0.2))
      .force("charge", d3.forceManyBody().strength(-50))


    var transform = d3.zoomIdentity;

    d3.json("https://jsonstorage.net/api/items/7a90797a-6abe-4795-bf5c-20b08644fe1e").then(data => initGraph(data));

    function initGraph(tempData) {
      function zoomed() {
        transform = d3.event.transform;
        simulationUpdate();
      }

      d3.select(graphCanvas)
        .call(d3.drag().subject(dragsubject).on("start", dragstarted).on("drag", dragged).on("end", dragended))
        .call(d3.zoom().scaleExtent([1 / 10, 8]).on("zoom", zoomed))



      function dragsubject() {
        var i,
          x = transform.invertX(d3.event.x),
          y = transform.invertY(d3.event.y),
          dx,
          dy;
        for (i = tempData.nodes.length - 1; i >= 0; --i) {
          node = tempData.nodes[i];
          dx = x - node.x;
          dy = y - node.y;

          if (dx * dx + dy * dy < radius * radius) {

            node.x = transform.applyX(node.x);
            node.y = transform.applyY(node.y);

            return node;
          }
        }
      }

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

      function dragged() {
        d3.event.subject.fx = transform.invertX(d3.event.x);
        d3.event.subject.fy = transform.invertY(d3.event.y);

      }

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

      simulation.nodes(tempData.nodes)
        .on("tick", simulationUpdate);

      simulation.force("link")
        .links(tempData.edges);



      function render() {

      }

      function simulationUpdate() {
        context.save();
        context.clearRect(0, 0, graphWidth, height);
        context.translate(transform.x, transform.y);
        context.scale(transform.k, transform.k);

        context.beginPath();
        context.strokeStyle = 'rgba(255, 0, 0, 1)';
        tempData.edges.forEach(function (d) {
          context.moveTo(d.source.x, d.source.y);
          context.lineTo(d.target.x, d.target.y);
        });
        context.stroke();
        context.closePath();

        const part1 = tempData.nodes.slice(0, tempData.nodes.length / 2);
        const part2 = tempData.nodes.slice(tempData.nodes.length / 2);

        context.fillStyle = 'black';
        context.beginPath();
        part1.forEach(function (d, i) {
          context.moveTo(d.x, d.y);
          context.arc(d.x, d.y, radius, 0, 2 * Math.PI, true);
        });
        context.fill();
        context.closePath();

        context.fillStyle = 'orange';
        context.beginPath();
        part2.forEach(function (d, i) {
          context.moveTo(d.x, d.y);
          context.arc(d.x, d.y, radius, 0, 2 * Math.PI, true);
        });
        context.fill();
        context.closePath();

        context.restore();
      }
    };


  </script>
</body>```

标签： performancecanvasvisualizationscaled3-force-directed

解决方案

推荐阅读