Question

我正在使用d3v5，目前正在尝试制作力导向图的节点：

淡出未直接连接到“鼠标悬停”节点的节点
扩大现有节点

到目前为止，我已经管理了前者，但是我无法管理与fade()函数一起触发的任何函数。考虑：

 var node = svg
    .append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter()
    .append("circle")
    .attr("r", function (d) {
      return 1.5 * Math.sqrt(d.weight);
    })
    .attr("fill", function (d) {
      return "red";
    })
    .call(
      d3
        .drag()
        .on("start", dragstarted)
        .on("drag", dragged)
        .on("end", dragended)
    )
    .on("mouseover", fade(0.2))
    .on("mouseout", fade(1));

和“淡入淡出”功能：

  function fade(opacity) {
    return function (d) {
      // check all other nodes to see if they're connected
      // to this one. if so, keep the opacity at 1, otherwise
      // fade
      node.style("stroke-opacity", function (o) {
        thisOpacity = isConnected(d, o) ? 1 : opacity;
        return thisOpacity;
      });
      node.style("fill-opacity", function (o) {
        thisOpacity = isConnected(d, o) ? 1 : opacity;
        return thisOpacity;
      });
      // also style link accordingly
      link.style("stroke-opacity", function (o) {
        return o.source.name === d.name || o.target.name === d.name
          ? 1
          : opacity;
      });
      text.style("fill-opacity", function (o) {
        thisOpacity = isConnected(d, o) ? 1 : opacity;
        return thisOpacity;
      });
    };
  }

到目前为止，一切都按预期进行。但是，当我开始四处寻找以在鼠标悬停（和mouseout）上执行另一个功能时，我尝试了以下常规方法：

  var node = svg
    //...
    .on("mouseover", function (d) {
      console.log("make node bigger")
      fade(0.2);
    })
    .on("mouseout", function (d) {
      console.log("make node smaller")
      fade(1);
    });

将输出两个控制台消息，但是fade()函数不会执行。我尝试放return fade(...);，但无济于事。

对于为什么会这样的任何见解，我将不胜感激。谢谢。

Answer 1

当你做...

.on("mouseover", fade(0.2))

...您正在立即调用fade，并返回其返回值，该返回值本身就是一个函数：

return function (d) { //etc...

您看到的d参数对应于selection.on()方法传递的第一个参数。最后，您只有一个惯用的D3侦听器，它是一个接受数据作为第一个参数的匿名函数。

但是，现在您正在执行此操作...

.on("mouseover", function (d) {
    console.log("make node bigger")
    fade(0.2);
})

...您必须重构fade函数，因为数据不再作为参数传递。最简单的方法是将基准作为参数传递：

.on("mouseover", function (d) {
    console.log("make node bigger")
    fade(d, 0.2);
    //   ^---- datum here
})

然后，在fade中，为基准添加一个参数并删除return function(d)部分：

function fade(d, opacity) {
    //datum---^
    node.style("stroke-opacity", function (o) {
        thisOpacity = isConnected(d, o) ? 1 : opacity;
        return thisOpacity;
    });
    //etc...
}

Answer 2

在您的fade()中，替换：

node.style("stroke-opacity", function (o) {
   thisOpacity = isConnected(d, o) ? 1 : opacity;
   return thisOpacity;
});

具有：

node.style("opacity", function (o) {
   thisOpacity = isConnected(d, o) ? 1 : opacity;
   return thisOpacity;
});

在mouseover事件处理程序中使用多个功能时出现问题

2 个答案: