CODEWITHSUNDEEP
javascriptsvgd3.js
JARRRRG
JARRRRG

Reputation: 926

d3.js - d3.select("#id).remove() or .attr("class", "hidden") not working

I'm trying to remove or even set the class of a d3 svg element in my javascript however it doesn't seem to get applied.

The d3 element is part of a group and if I set the id to a single word e.g. "region" it will delete/modify however I want but to the whole group.

I assign the id of all the elements with their specific names when I append them.

However, as the title suggests the d3.select is not allowing me to modify the existing element.

Here is an image of the structure in chrome element view.

element view

Example code of how the paths are constructed and how I'm trying to manipulate them.

// Construction
features.selectAll()
            .data(json.features)
            .enter()
            .append("path")
            .attr("class", function (e) {
                return "region " + e.properties.Name + " feature";
            })
            .attr("d", path)
            .attr("id", function(e) {
                return "region " + e.properties.Name + " feature";
            })
            .on("click", function (d) {
                qualifyType(d);
            });

// Manipulation
d3.select("#region South East feature").attr("class", "hidden");
d3.select("#region " + feature.properties.Name + " feature").remove();

I've tried a few other variations too such as d3.selectAll and what not but no joy.

Upvotes: 2

Views: 6531

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109242

D3 uses CSS selectors for selecting elements, and in those class names have to be prefixed by dots. So selecting the element with ID region and classes South East feature would look like this:

d3.select("#region.South.East.feature")

Upvotes: 4

Related Questions