selectAll()

时间:2015-10-10 23:16:45

标签: javascript d3.js filter

我正在努力了解美丽的图书馆D3。 真的 - 我不明白为什么以下几行不起作用。 代码应该只填充一些特殊颜色的cirlces。

<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 =°)

°°°°°°°°°(°)&lt; -special color

°°°°°°°°°(°)&lt; -special color

°°°°°°°°°(°)&lt; -special color

但它不适用于功能过滤器(毕竟没有它确实^^)。 如果有人能帮助我的话会很棒! 此致

1 个答案:

答案 0 :(得分:0)

您传递给过滤器的每个“d”对象都包含该圈子的所有属性。如果要对特定索引进行过滤,可以将两个参数传递给过滤器:

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

如果要过滤d的属性,则需要使用点表示法或括号表示法来访问它。