Fisheye effect with force-directed graph ：在图形稳定之前不生效

Question

我正在创建一个具有鱼眼效果的图表，用户在其光标下可以永久缩放，并且可以四处移动图表节点。

并以摘要形式：

d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json").then(draw);
  
function draw(data) {
  
  const fisheye = fisheyeO.circular()
  .radius(100)
  .distortion(5);
  
  const height = 400;
  const width = 500;
  
  data.nodes.forEach(d=>{d.fisheye={x:0,y:0,z:0}})

  const simulation = d3.forceSimulation(data.nodes)
      .alphaDecay(0.0125)
      .alphaMin(0.01)
  .force("link", d3.forceLink(data.links).id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("x", d3.forceX(width/2))
  .force("y", d3.forceY(height/2));

  const svg = d3.select("body").append("svg")
  .attr("viewBox", [0, 0, width, height])

  const link = svg.append("g")
  .attr("stroke", "#999")
  .attr("stroke-opacity", 0.6)
  .selectAll("line")
  .data(data.links)
  .join("line")
  .attr("stroke-width", 2);
  
  const node = svg.append("g")
  .attr("stroke", "#fff")
  .attr("stroke-width", 1.5)
  .selectAll("circle")
  .data(data.nodes)
  .join("circle")
  .attr("r", 5)
  .attr("fill", "black")


  svg.on("mousemove", function() {
    fisheye.focus(d3.mouse(this));

    node.each(function(d) { d.fisheye = fisheye(d); })
      .attr("cx", function(d) { return d.fisheye.x; })
      .attr("cy", function(d) { return d.fisheye.y; })
      .attr("r", function(d) { return d.fisheye.z * 4.5; });

    link.attr("x1", function(d) { return d.source.fisheye.x; })
      .attr("y1", function(d) { return d.source.fisheye.y; })
      .attr("x2", function(d) { return d.target.fisheye.x; })
      .attr("y2", function(d) { return d.target.fisheye.y; });
  })

  simulation.on("tick", () => {
    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);
  });

}


const fisheye0 = fisheyeO = {
    circular: () => {
      var radius = 200,
          distortion = 2,
          k0,
          k1,
          focus = [0, 0];

      function fisheye(d) {
        var dx = d.x - focus[0],
            dy = d.y - focus[1],
            dd = Math.sqrt(dx * dx + dy * dy);
        if (!dd || dd >= radius) return {x: d.x, y: d.y, z: dd >= radius ? 1 : 10};
        var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
        return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)};
      }

      function rescale() {
        k0 = Math.exp(distortion);
        k0 = k0 / (k0 - 1) * radius;
        k1 = distortion / radius;
        return fisheye;
      }

      fisheye.radius = function(_) {
        if (!arguments.length) return radius;
        radius = +_;
        return rescale();
      };

      fisheye.distortion = function(_) {
        if (!arguments.length) return distortion;
        distortion = +_;
        return rescale();
      };

      fisheye.focus = function(_) {
        if (!arguments.length) return focus;
        focus = _;
        return fisheye;
      };

      return rescale();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>

我使用了 Bostock 的鱼眼效果，只要图表是静态的，它就可以正常工作。但是，如果力模拟是运行，它就不起作用，给出这个效果：

我试过将鱼眼效果重构为力，并直接在力模拟中使用它，如下所示：

function forceFisheye(fisheye) {
  let nodes;

  function force() {
    let i;
    let n = nodes.length;
    let node;

    for (i = 0; i < n; ++i) {
      node = nodes[i];
      let { x, y, z } = fisheye(node);
      node.x = x;
      node.y = y;
      node.z = z;
    }
  }

  force.initialize = function (_) {
    nodes = _;
  };

  return force;
}

let fisheye = fisheye();

// ...
d3.forceSimulation()
    .force("fisheye", forceFisheye(fisheye));

但这会产生奇怪的结果，让节点远离我的光标。

如何使用具有鱼眼效果的力导向图？

感谢您的宝贵时间！

Answer 1

关键的挑战是您有两个定位源同时工作以移动节点：设置位置以实现鱼眼效果的鼠标移动函数和设置位置以反映更新的力的刻度函数布局。由于 tick 函数不断被触发，这可能解释了您的评论，即鱼眼效果仅在力冷却时起作用：不再调用 tick 函数，并且两种定位方法之间没有冲突。

要消除相互竞争的定位方法，最好在强制冷却期间使用滴答功能，并在强制冷却后使用鼠标事件本身进行定位：因为鼠标不会一直在模拟过程中移动，蜱虫肯定不会在之后开火。

另一个挑战是，如果鼠标停止移动，尽管力布局发生运动，鱼眼效果也不会更新：我们需要在每个刻度更新鱼眼效果，以反映当节点漂移进出时哪些节点受到影响的重点领域。无论鼠标是否移动，都需要进行此更新。

如前所述，使用力创建鱼眼并不好：光标会强制节点更改 x/y 属性，而不仅仅是扭曲它们的外观：鱼眼效果不应干扰力布局的 forces/positional数据。

考虑到这些限制，一个快速的解决方案也许可以随着时间的推移被清理成更优雅的东西：

跟踪鼠标最后移动位置或鼠标是否退出 SVG：

  let xy = false;

  svg.on("mousemove", function() {  xy = d3.mouse(this); })
     .on("mouseleave", function() {  xy = false; })

在力定位期间，数据基于力和最近已知的鼠标位置来实现鱼眼：

    simulation.on("tick",position)

    function position() {
        if(xy) {
            fisheye.focus(xy);
            node.each(d=>{ d.fisheye = fisheye(d); })
          }
          else node.each(d=>{d.fisheye={x:0,y:0,z:0}})

          link
            .attr("x1", d => d.source.fisheye.x || d.source.x)
            .attr("y1", d => d.source.fisheye.y || d.source.y)
            .attr("x2", d => d.target.fisheye.x || d.target.x)
            .attr("y2", d => d.target.fisheye.y || d.target.y);

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

然后当模拟结束时，使用鼠标移动事件来计算静态节点上的鱼眼效果，因为 tick 不再触发：

    simulation.on("end", function() {
       svg.on("mousemove.position", position);
     })

d3.json("https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json").then(draw);
  
function draw(data) {
  
  const fisheye = fisheyeO.circular()
  .radius(100)
  .distortion(5);
  
  const height = 400;
  const width = 500;
  
  data

  const simulation = d3.forceSimulation(data.nodes)
      .alphaDecay(0.001)
      .alphaMin(0.01)
  .force("link", d3.forceLink(data.links).id(d => d.id))
  .force("charge", d3.forceManyBody())
  .force("x", d3.forceX(width/2))
  .force("y", d3.forceY(height/2));

  const svg = d3.select("body").append("svg")
  .attr("viewBox", [0, 0, width, height])

  const link = svg.append("g")
  .attr("stroke", "#999")
  .attr("stroke-opacity", 0.6)
  .selectAll("line")
  .data(data.links)
  .join("line")
  .attr("stroke-width", 2);
  
  const node = svg.append("g")
  .attr("stroke", "#fff")
  .attr("stroke-width", 1.5)
  .selectAll("circle")
  .data(data.nodes)
  .join("circle")
  .attr("r", 5)
  .attr("fill", "black")


  let xy = false;

  svg.on("mousemove", function() {  xy = d3.mouse(this); })
     .on("mouseleave", function() {  xy = false; })

  simulation.on("tick", position)
  .on("end", function() {
    svg.on("mousemove.position", position);
  })
  
  function position() {
    if(xy) {
        fisheye.focus(xy);
        node.each(d=>{ d.fisheye = fisheye(d); })
      }
      else node.each(d=>{d.fisheye={x:0,y:0,z:0}})

      link
        .attr("x1", d => d.source.fisheye.x || d.source.x)
        .attr("y1", d => d.source.fisheye.y || d.source.y)
        .attr("x2", d => d.target.fisheye.x || d.target.x)
        .attr("y2", d => d.target.fisheye.y || d.target.y);

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

}


const fisheye0 = fisheyeO = {
    circular: () => {
      var radius = 200,
          distortion = 2,
          k0,
          k1,
          focus = [0, 0];

      function fisheye(d) {
        var dx = d.x - focus[0],
            dy = d.y - focus[1],
            dd = Math.sqrt(dx * dx + dy * dy);
        if (!dd || dd >= radius) return {x: 0, y: 0, z: dd >= radius ? 1 : 10};
        var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
        return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)};
      }

      function rescale() {
        k0 = Math.exp(distortion);
        k0 = k0 / (k0 - 1) * radius;
        k1 = distortion / radius;
        return fisheye;
      }

      fisheye.radius = function(_) {
        if (!arguments.length) return radius;
        radius = +_;
        return rescale();
      };

      fisheye.distortion = function(_) {
        if (!arguments.length) return distortion;
        distortion = +_;
        return rescale();
      };

      fisheye.focus = function(_) {
        if (!arguments.length) return focus;
        focus = _;
        return fisheye;
      };

      return rescale();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js"></script>

Fisheye effect with force-directed graph ：在图形稳定之前不生效

Fisheye effect with force-directed graph : not taking effect until the graph settles

d3.js

force-layout