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

解决方法:

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

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

您可以避免使用selection.each来将填充的当前状态检查为样式字符串.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; });
      }
    });
  });

标签：double-click,d3-js,attributes,javascript
来源： https://codeday.me/bug/20191029/1957506.html