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

【问题标题】：D3 force directed layout - changing node color and its links color on button clickD3 强制定向布局 - 单击按钮时更改节点颜色及其链接颜色
【发布时间】：2014-02-18 04:42:12
【问题描述】：

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

我已设法将节点涂成红色，但链接有问题。

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

$(".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 代码的末尾。

欢迎任何帮助或建议。

【问题讨论】：

你的 jsfiddle 只显示一个按钮，没有别的；这是你想要的方式吗？

标签： javascript css d3.js force-layout

【解决方案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。

【讨论】：

那是关键！伟大的人非常感谢你。我正在尝试对节点做同样的事情，如果它们已连接，则将不透明度留给所有其他的淡入淡出它们......如果我被卡住了，我会再问一个问题:)
你能再帮忙一点吗？我被这些节点困住了，我不知道为什么除了最后三个节点之外的每个节点都获得 0.4 的不透明度。我已经将它与：node.style("stroke-opacity", function(o) { e. forEach(function(a){ thisOpacity = isConnected(a, o) ? 1 : opacity; }); this.setAttribute('fill-opacity', thisOpacity); return thisOpacity; });.这是一个链接：jsfiddle.net/rd3Uv 或者我打开一个新问题？它在 507 线上
这不是我的意图，我希望那些有颜色的节点和与其链接相连的邻居节点不会淡出，只是那些没有任何东西的节点会淡出。 .. 我开始了一些事情，但它只适用于你在上面的链接中看到的第一次出现
我不太明白你想要什么。你想淡出什么？
我想淡出那些没有变红的节点和那些没有连接到那些红色机智“人”类的节点

【解决方案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" ;
                    })
                    ;
            }
        }

【讨论】：