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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.