2

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.

JARRRRG
  • 917
  • 2
  • 14
  • 44
  • Can you post example code that reproduces the problem please? – Lars Kotthoff Jan 22 '15 at 11:04
  • Hey thanks for getting back to me, I've updated the question to reflect your request. Hopefully it provides the context you're after, I'm doing this in an angular-js directive. I doubt you'd want to see the whole directive :) – JARRRRG Jan 22 '15 at 11:11
  • Looks like your selector is wrong. Class names should be prefixed with a dot, so selecting element with ID `region` and classes `South East feature` would be `d3.select("#region .South .East .feature")`. – Lars Kotthoff Jan 22 '15 at 11:18
  • 1
    Okay, problem spotted. So in the construction if I don't assign the id as region South East feature and only do that in the class (which is how I was originally doing it in a previous version and makes sense to do) and have the class as "South East feature" for example. I can do, as you suggest - d3.select("#region.South.East.feature").remove(); and that works. The issue I was having is, I was really close but you can't have spaces. You can't do exagtly what you wrote "#region .South .E".. You have to remove the spaces. Again, thanks for your help, please put this as an answer so I can reward. – JARRRRG Jan 22 '15 at 11:25
  • Ah, well spotted about the spaces. Will add as an answer. – Lars Kotthoff Jan 22 '15 at 11:32

1 Answers1

4

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")
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • Will this work? I think the id actually has spaces in it like ```id="region South East feature"```. That is, 'South', 'East', and 'feature' are not classes but part of the id. I don't think spaces in ids are legal, which is probably the issue. [Edit: Whoops, didn't see that this is in the context of a comment above and not the original question. Another option would be to remove the spaces from the ID and use the original approach.] – Ethan Jewett Jan 22 '15 at 14:12
  • See http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html -- spaces are not allowed. – Lars Kotthoff Jan 22 '15 at 16:17