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

• 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

1 Answer 1

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)
  })