Javascript D3力布局悬停在箭头上

我正在构建一个有向图，在

悬停

事件中，我要突出显示相关节点、链接和邻居。在我向链接添加箭头之前，一切都很顺利

我无法确定如何突出显示箭头和链接。

欢迎任何帮助

jsfiddle：

代码：

---

因此，imho需要考虑两件事：

由于只希望高亮显示某些箭头，因此需要定义两个标记并切换链接的标记

您还需要切换链接本身的样式

因此，基本上-查看完整的更改：

  var arrows = defs
     .selectAll("marker")
     // let's add two markers: one for unhovered links and one for hovered links.
     .data(["end", "end-active"]) // Different link/path types can be defined here
     .enter().append("svg:marker") // This section adds in the arrows
     .attr("id", String)
     .attr("viewBox", "0 -5 10 10")
     .attr("refX", 20)
     .attr("markerWidth", 6)
     .attr("markerHeight", 6)
     .attr("orient", "auto")
     .append("svg:path")
     .attr("d", "M0,-5L10,0L0,5");

     //define the classes for each of the markers.
     defs.select("#end").attr("class", "arrow");
     defs.select("#end-active").attr("class", "arrow-active");
//...
// then further down in function set_highlight and exit highlight:
function set_highlight(d) {
  node.select("text").text(function(o) {
    return isConnected(d, o) ? o.name : "";
  })
  node.attr("class", function(o) {
    return isConnected(d, o) ? "node-active" : "node";
  });
  link.attr("marker-end", function(o) {
    return o.source.index == d.index || o.target.index == d.index ? "url(#end-active)" : "url(#end)";
  });
  link.attr("class", function(o) {
    return o.source.index == d.index || o.target.index == d.index ? "link-active" : "link";
  });
}



function exit_highlight(d) {
  node.attr("class", "node");
  link.attr("class", "link");
  link.attr("marker-end", "url(#end)");
  node.select("text").text("")
}

编辑：如果要重用某些代码，可以添加以下内容：

// inside the set_highlight function
    link.attr("marker-end", function(o) {
        return isLinkForNode(d, o) ? "url(#end-active)" : "url(#end)";
    });
    link.attr("class", function(o) {
        return isLinkForNode(d, o) ? "link-active" : "link";
    });


function isLinkForNode(node, link) {
    return link.source.index == node.index || link.target.index == node.index;
}

---

因此，imho需要考虑两件事：

由于只希望高亮显示某些箭头，因此需要定义两个标记并切换链接的标记

您还需要切换链接本身的样式

因此，基本上-查看完整的更改：

  var arrows = defs
     .selectAll("marker")
     // let's add two markers: one for unhovered links and one for hovered links.
     .data(["end", "end-active"]) // Different link/path types can be defined here
     .enter().append("svg:marker") // This section adds in the arrows
     .attr("id", String)
     .attr("viewBox", "0 -5 10 10")
     .attr("refX", 20)
     .attr("markerWidth", 6)
     .attr("markerHeight", 6)
     .attr("orient", "auto")
     .append("svg:path")
     .attr("d", "M0,-5L10,0L0,5");

     //define the classes for each of the markers.
     defs.select("#end").attr("class", "arrow");
     defs.select("#end-active").attr("class", "arrow-active");
//...
// then further down in function set_highlight and exit highlight:
function set_highlight(d) {
  node.select("text").text(function(o) {
    return isConnected(d, o) ? o.name : "";
  })
  node.attr("class", function(o) {
    return isConnected(d, o) ? "node-active" : "node";
  });
  link.attr("marker-end", function(o) {
    return o.source.index == d.index || o.target.index == d.index ? "url(#end-active)" : "url(#end)";
  });
  link.attr("class", function(o) {
    return o.source.index == d.index || o.target.index == d.index ? "link-active" : "link";
  });
}



function exit_highlight(d) {
  node.attr("class", "node");
  link.attr("class", "link");
  link.attr("marker-end", "url(#end)");
  node.select("text").text("")
}

编辑：如果要重用某些代码，可以添加以下内容：

// inside the set_highlight function
    link.attr("marker-end", function(o) {
        return isLinkForNode(d, o) ? "url(#end-active)" : "url(#end)";
    });
    link.attr("class", function(o) {
        return isLinkForNode(d, o) ? "link-active" : "link";
    });


function isLinkForNode(node, link) {
    return link.source.index == node.index || link.target.index == node.index;
}

---

非常感谢，它很有魅力。很抱歉，我是javascript/d3新手，提出了一个天真的问题。干杯嘿没有这样的事。任何时候：）非常感谢，它像一个魅力。很抱歉，我是javascript/d3新手，提出了一个天真的问题。干杯嘿没有这样的事。随时：）