在D3中双击更改节点的颜色

我希望节点的颜色在双击时发生变化。即在第一次双击时，它会变成黑色，但是在重新双击它时，它会变回原来的颜色。我能够在第一次双击时变成黑色，但我无法使其恢复到原来的颜色。在此先感谢，这里是我的代码。处理这种在D3中双击更改节点的颜色

var gnodes = svg.selectAll('g.gnode') 
       .data(graph.nodes) 
       .enter() 
       .append('g') 
       .classed('gnode', true); 

var node = gnodes.append("circle") 
       .attr("class", "node") 
       .attr("r", 5) 
       .style("fill", function(d) {return d.colr; }) 
       .on('dblclick', function (d) 
       { 
         if (d3.select(this).style("fill") != "black") 
          { 
           d3.select(this).style("fill", "black"); 
          } 
         else 
          { 
           d3.select(this).style("fill", function(d){return d.colr;}); 
          } 
       }) 
       .call(force.drag);

来源

2014-09-25 Learner23

的你在这里遇到的问题实际上很难找到。

您正在检查fill样式是否等于字符串"black"。问题是，许多浏览器（包括Chrome和FF）会将颜色名称重新格式化为RGB字符串。因此，当您将填充设置为"black"时，它将转换为RGB字符串"rgb(0, 0, 0)"。所以实际上，调用d3.select(this).style("fill")将返回此rgb字符串而不是颜色名称，确保代码的else分支永不运行。

通过使用selection.each将每个圆的状态存储为布尔值，然后注册其双击处理程序（可以切换布尔值，然后根据分支进行切换），可以避免必须检查填充的当前状态作为样式字符串它的价值。试试这个：

var node = gnodes.append("circle") 
    .attr("class", "node") 
    .attr("r", 5) 
    .style("fill", function(d) {return d.colr; }) 
    .each(function() { 
    var sel = d3.select(this); 
    var state = false; 
    sel.on('dblclick', function() { 
     state = !state; 
     if (state) { 
     sel.style('fill', 'black'); 
     } else { 
     sel.style('fill', function(d) { return d.colr; }); 
     } 
    }); 
    });

来源

2014-09-26 03:25:49 jshanley

不适用于我，因为所有节点都变黑，而不仅仅是双击节点。 – Learner23 2014-09-26 03:53:05

啊，'gnodes'是一个输入选择不是它。好吧，我更新了答案，使用'selection.each'来做同样的事情，但是对于每个圈子。 – jshanley 2014-09-26 04:05:35

工程！非常感谢！这是一个很好的方式来做到这一点。 – Learner23 2014-09-26 04:10:51

一种方式是通过CSS：

.doubled { fill: black !important; }

然后在你的DBLCLICK功能切换此CSS类：

d3.selectAll(".node") 
    .on("dblclick", function() { 
    var c = d3.select(this).classed("doubled"); 
    d3.select(this).classed("doubled", !c); 
    })

工作示例这里：http://jsfiddle.net/qAHC2/829/

来源

2014-09-26 03:19:01 Josh

看起来我犯了一些错误，因为尽管添加了CSS类，但这不起作用。颜色根本不会改变。 – Learner23 2014-09-26 04:13:36

在D3中双击更改节点的颜色

回答

相关问题