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

Question

我希望节点的颜色在双击时改变。即在第一次双击时，它会变成黑色，但在重新双击它时，它会变回原来的颜色。我可以在第一次双击时让它变黑，但我无法让它变回原来的颜色。在此先感谢，这是我的代码。

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

Answer 1

您在这里遇到的问题实际上很难发现。

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

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

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