javascript - D3 强制定向布局 - 在单击按钮时更改节点颜色及其链接颜色

Question

我又有点迷路了，我需要你帮助我在 D3 中的“fungraph”。我想通过单击按钮为具有相同给定类“人”的所有节点及其链接着色。

我已经设法让节点变成红色，但我遇到了链接问题。

我尝试使用简化版的淡入淡出功能，我将其用于节点上的鼠标悬停。我首先为按钮创建了点击功能:

$(".btn_person").on("click",function(){

        d3.selectAll(".person").select('circle')
                    .transition()
                    .duration(500)
                    .attr("style", "fill:red; stroke:red; stroke-width: 2px;" )
                    .call(fadeAll(.4,"red"));


 });

并创建了 fadeAll 函数，如您所见，我正在调用它:

 function fadeAll(opacity,color) {

        return function(d) {


            link.style("stroke-opacity", function(o) {
                    return o.source === d || o.target === d ? 1 : opacity;
                })   
                .style("stroke", function(o) {
                    return o.source === d || o.target === d ? color : "#000" ;
                });
            };

        }

但它并没有像我预期的那样工作。我没有收到任何错误，但来自彩色节点的链接不会变成红色，并且所有链接的不透明度都为 0.4，但我不知道为什么？我是否以错误的方式调用函数？

您可以看到我的情况，并在单击以下链接上的“人”按钮时测试问题:http://jsfiddle.net/9rSM6/

有问题的代码在 JavaScript 代码的末尾。

欢迎任何帮助或建议。

Answer 1

您就快完成了——d 是一个 D3 选择，因此您不能直接将元素与它进行比较。相反，您需要提取选择中的元素，然后检查 .source 或 .target 是否在此数组中:

var e = [];
d.each(function(a, i) { e[i] = a; });

link.style("stroke-opacity", function(o) {
    return e.indexOf(o.source) != -1 || e.indexOf(o.target) != -1 ? 1 : opacity;
  })   
  .style("stroke", function(o) {
    return e.indexOf(o.source) != -1 || e.indexOf(o.target) != -1 ? color : "#000" ;
  });

完整示例 here .