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" ;
  });

在这里完成示例。

Answer 2

返回函数的参数“d”与节点的id不同。 此外，无法将源对象和目标对象与用作键的其他对象进行比较。 不应将IMO对象用作键。

以下代码适用于我（请参阅完整代码） ：

function fadeAll(opacity,color) { 
            return function(ds) { 
                var selected = Number(d3.select(this).attr('id')); 
                link
                    .style("stroke-opacity", function(o) { 
                        return o.source.id === selected || o.target.id === selected ? 1 : 0.1;
                    })   
                    .style("stroke", function(o) {
                        return o.source.id === selected || o.target.id === selected ? "#000" : "#ddd" ;
                    })
                    ;
            }
        }