javascript - D3 filter() after a selectAll() - Stack Overflow

admin管理员组

文章数量:1356709

I'm trying to understand the beatiful library D3. Really – I don't understand why the following lines do not work. The code should fill only a few of the cirlces in a special color.

<svg>
<g id="row_1"> ... </g>
<g id="row_1"> ... </g>
<g id="row_3"> ... </g>
    <circle cx="16.887" cy="333.923" r="6.268"/>
    <circle cx="33.574" cy="333.923" r="6.268"/>
    <circle cx="50.262" cy="333.923" r="6.268"/>
    <circle cx="66.949" cy="333.923" r="6.268"/>
    <circle cx="167.074" cy="333.923" r="6.268"/>
    <circle cx="183.762" cy="333.923" r="6.268"/>
    <circle cx="333.387" cy="333.923" r="6.268"/>
    <circle cx="316.699" cy="333.923" r="6.268"/>
    <circle cx="300.199" cy="334.101" r="6.268"/>
    <circle cx="266.637" cy="333.923" r="6.268"/>
    <circle cx="250.137" cy="333.923" r="6.268"/>
    <circle cx="216.762" cy="333.923" r="6.268"/>
</g>
</svg>


<script>
var i;
var identifierID;
var svg = d3.select("svg");  

for (i=0; i<=20; i++){
   identifierID = "#row_"+i;
   svg.select(identifierID).selectAll("circle")
   .filter(function(d){ return d == 12; }).style("fill","blue") *//the value 12 is a example*
}
</script>

The code looks like (circle = ° )

° ° ° ° ° ° ° ° ° ° ° (°) <-special color

° ° ° ° ° ° ° ° ° ° ° (°) <-special color

° ° ° ° ° ° ° ° ° ° ° (°) <-special color

But it does not work with the function filter (after all without it does^^). It would be great, if someone could help me! Regards

I'm trying to understand the beatiful library D3. Really – I don't understand why the following lines do not work. The code should fill only a few of the cirlces in a special color.

<svg>
<g id="row_1"> ... </g>
<g id="row_1"> ... </g>
<g id="row_3"> ... </g>
    <circle cx="16.887" cy="333.923" r="6.268"/>
    <circle cx="33.574" cy="333.923" r="6.268"/>
    <circle cx="50.262" cy="333.923" r="6.268"/>
    <circle cx="66.949" cy="333.923" r="6.268"/>
    <circle cx="167.074" cy="333.923" r="6.268"/>
    <circle cx="183.762" cy="333.923" r="6.268"/>
    <circle cx="333.387" cy="333.923" r="6.268"/>
    <circle cx="316.699" cy="333.923" r="6.268"/>
    <circle cx="300.199" cy="334.101" r="6.268"/>
    <circle cx="266.637" cy="333.923" r="6.268"/>
    <circle cx="250.137" cy="333.923" r="6.268"/>
    <circle cx="216.762" cy="333.923" r="6.268"/>
</g>
</svg>


<script>
var i;
var identifierID;
var svg = d3.select("svg");  

for (i=0; i<=20; i++){
   identifierID = "#row_"+i;
   svg.select(identifierID).selectAll("circle")
   .filter(function(d){ return d == 12; }).style("fill","blue") *//the value 12 is a example*
}
</script>

The code looks like (circle = ° )

° ° ° ° ° ° ° ° ° ° ° (°) <-special color

° ° ° ° ° ° ° ° ° ° ° (°) <-special color

° ° ° ° ° ° ° ° ° ° ° (°) <-special color

But it does not work with the function filter (after all without it does^^). It would be great, if someone could help me! Regards

• javascript
• d3.js
• filter

Share Improve this question Follow edited Oct 11, 2015 at 10:18 LolaRuns asked Oct 10, 2015 at 23:16 LolaRunsLolaRuns 10911 gold badge11 silver badge88 bronze badges 1

• d would be the data bound to the circle, but you have not bound any data so d will be undefined so all elements will return falsey in the filter and you will get an empty selection. – Cool Blue Commented Oct 11, 2015 at 0:27

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Each 'd' object you are passing to your filter holds all the properties of that circle. If you want to filter on a specific index, you can pass two arguments to filter:

.filter(function(d, i) // i is the index
    return i === 12;
});

if you want to filter on a property of d, you need to access it with dot notation or bracket notation.

本文标签： javascriptD3 filter() after a selectAll()Stack Overflow