我正在尝试了解美丽的库 D3。 真的——我不明白为什么以下几行不起作用。 代码应该只用特殊颜色填充几个圆圈。
<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>
代码看起来像 (circle = °)
° ° ° ° ° ° ° ° ° ° ° (°) <-特殊颜色
° ° ° ° ° ° ° ° ° ° ° (°) <-特殊颜色
° ° ° ° ° ° ° ° ° ° ° (°) <-特殊颜色
但它不适用于函数过滤器(毕竟没有它^^)。 如果有人可以帮助我,那就太好了! 问候
最佳答案
您传递给过滤器的每个“d”对象都包含该圆的所有属性。如果你想过滤一个特定的索引,你可以传递两个参数给过滤器:
.filter(function(d, i) // i is the index
return i === 12;
});
如果要过滤 d 的属性,则需要使用点符号或括号符号来访问它。
关于javascript - selectAll() 之后的 D3 filter(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33059964/