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

admin管理员组

文章数量:1426642

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.

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.

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.

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.

• javascript
• svg
• d3.js

Share Improve this question Follow edited Jan 22, 2015 at 11:11 JARRRRG asked Jan 22, 2015 at 10:54 JARRRRGJARRRRG 92622 gold badges1616 silver badges4747 bronze badges 5

• Can you post example code that reproduces the problem please? – Lars Kotthoff Commented Jan 22, 2015 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 Commented Jan 22, 2015 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 Commented Jan 22, 2015 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 Commented Jan 22, 2015 at 11:25
• Ah, well spotted about the spaces. Will add as an answer. – Lars Kotthoff Commented Jan 22, 2015 at 11:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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")

本文标签：