score:8

Accepted answer

If you want to "un-highlight" an item when another one has been clicked, you need a way to find the previously highlighted item and unset its "highlighted" status.

One way to do this is to assign a particular class to the highlighted item that allows you to find it again later. Whether you use that to also set the style of the item doesn't matter.

For example, on a click the following would first find the previously highlighted item by searching for an item that has the .highlighted class, remove the .highlighted class from that item, and then assign the .highlighted class to the current item:

.on("click", function () {
            // Find previously selected, unselect
            d3.select(".selected").classed("selected", false);

            // Select current item
            d3.select(this).classed("selected", true);
        });

You can try it out in this fiddle.


Related Query