javascript - Change the color of nodes on double click in D3 - Stack Overflow

admin管理员组

文章数量:1355014

I want the color of node to change on double click. i.e. On the first double click, it would turn black but on re-double clicking it, it would turn back to its original color. I am able to make it turn black on the first double click, but I'm not able to make it turn back to its original color. Thanks in advance and here is my code.

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

I want the color of node to change on double click. i.e. On the first double click, it would turn black but on re-double clicking it, it would turn back to its original color. I am able to make it turn black on the first double click, but I'm not able to make it turn back to its original color. Thanks in advance and here is my code.

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

• javascript
• d3.js
• attributes
• double-click

Share Improve this question Follow edited Sep 26, 2014 at 0:51 GobSmack 2,26144 gold badges2323 silver badges2828 bronze badges asked Sep 25, 2014 at 23:46 Learner23Learner23 13711 gold badge11 silver badge99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The issue you're having here is actually really tricky to spot.

You are checking whether the fill style is equal to the string "black". The problem is, many browsers (including Chrome and FF) reformat color names to RGB strings. So, when you set the fill to "black", it is converted to the RGB string "rgb(0, 0, 0)". So actually, calling d3.select(this).style("fill") will return this rgb string rather than the color name, ensuring that the else branch of your code never runs.

You can avoid having to check the current state of your fill as a style string by using selection.each to store each circle's state as a boolean value and then register its double-click handler, which toggles the boolean and then branches based on its value. Try this:

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

One way to handle this is via CSS:

.doubled { fill: black !important; }

Then toggle this CSS class in your dblclick function:

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

Working example here: http://jsfiddle/qAHC2/829/

本文标签： javascriptChange the color of nodes on double click in D3Stack Overflow