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。

Answer 2

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

以下代码对我有用(see complete code)：

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

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

2 个答案: