javascript - How to select elements according to an attribute(fill color) in D3.js with SelectAll - Stack Overflow

admin管理员组

文章数量:1431426

I have sets of circles on a map like 10 red circles, 10 blue circles, 10 green circles. How can i select only red circles using d3 selectAll or select?

Or is there any other methods than that?

the color has been given like this(as the value of "fill" in "style" attribute,

feature = g.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("id", function (d) {
    return d.ArtistID + d.FollowerID;
})
    .style("stroke", "black")
    .style("opacity", .6)
    .style("fill", function (d) {
    if (d.ArtistID == 1) {
        return "red"
    } else if (d.ArtistID == 2) {
        return "blue"
    } else {
        return "green"
    };
})
    .attr("r", 10);

so, the circles will be drawn like this,

<circle id="10" r="10" transform="translate(695,236)" style="stroke: rgb(0, 0, 0); opacity: 0.6; fill: rgb(255, 255, 0);"></circle>

I want to select the circles of red color. Cam somebody help?

Thanks in Advance.

I have sets of circles on a map like 10 red circles, 10 blue circles, 10 green circles. How can i select only red circles using d3 selectAll or select?

Or is there any other methods than that?

the color has been given like this(as the value of "fill" in "style" attribute,

feature = g.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("id", function (d) {
    return d.ArtistID + d.FollowerID;
})
    .style("stroke", "black")
    .style("opacity", .6)
    .style("fill", function (d) {
    if (d.ArtistID == 1) {
        return "red"
    } else if (d.ArtistID == 2) {
        return "blue"
    } else {
        return "green"
    };
})
    .attr("r", 10);

so, the circles will be drawn like this,

<circle id="10" r="10" transform="translate(695,236)" style="stroke: rgb(0, 0, 0); opacity: 0.6; fill: rgb(255, 255, 0);"></circle>

I want to select the circles of red color. Cam somebody help?

Thanks in Advance.

• javascript
• css
• d3.js

Share Improve this question Follow edited Sep 7, 2014 at 14:48 Anonymous 10.2k33 gold badges2626 silver badges3939 bronze badges asked Sep 7, 2014 at 14:12 IsuIsu 4711 silver badge1212 bronze badges 2

• Try assigning a class instead of just a color. Then select the class. – Union find Commented Sep 7, 2014 at 14:19
• 1 stackoverflow./questions/11043279/… – Lars Kotthoff Commented Sep 7, 2014 at 14:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You're asking to select based on the value of the style attribute. The fill property is nested within the style attribute; it is not a direct attribute of the DOM node. So you won't be able to select it using an attribute selector (ie the method @LarsKotthoff linked to).

You can switch to setting the fill using the SVG fill attributes, .attr('fill', ...) instead of using style('fill'), which will allow you to later select it using an attribute selector.

That aside, selecting via the fill attribute doesn't seem too elegant. If your design evolves and you start using a different fill color, you'll have to change the attribute selector as well. Assigning it a class and selecting based on the class is more appropriate.

Perhaps the best is to select based on data. Eg:

g.selectAll('circle')
  .filter(function(d) { return d.ArtistID == 1; })
  .style('fill', function(d, i) {
    // here you can affect just the red circles (bc their ArtistID is 1)
  })

本文标签：