selectAll() 之后的 D3 filter()

Question

我正在尝试了解美丽的 D3 库。\n真的\xe2\x80\x93 我不明白为什么下面的行不起作用。\n代码应该仅用特殊颜色填充少数圆圈。

\n\n

<svg>\n<g id="row_1"> ... </g>\n<g id="row_1"> ... </g>\n<g id="row_3"> ... </g>\n    <circle cx="16.887" cy="333.923" r="6.268"/>\n    <circle cx="33.574" cy="333.923" r="6.268"/>\n    <circle cx="50.262" cy="333.923" r="6.268"/>\n    <circle cx="66.949" cy="333.923" r="6.268"/>\n    <circle cx="167.074" cy="333.923" r="6.268"/>\n    <circle cx="183.762" cy="333.923" r="6.268"/>\n    <circle cx="333.387" cy="333.923" r="6.268"/>\n    <circle cx="316.699" cy="333.923" r="6.268"/>\n    <circle cx="300.199" cy="334.101" r="6.268"/>\n    <circle cx="266.637" cy="333.923" r="6.268"/>\n    <circle cx="250.137" cy="333.923" r="6.268"/>\n    <circle cx="216.762" cy="333.923" r="6.268"/>\n</g>\n</svg>\n\n\n<script>\nvar i;\nvar identifierID;\nvar svg = d3.select("svg");  \n\nfor (i=0; i<=20; i++){\n   identifierID = "#row_"+i;\n   svg.select(identifierID).selectAll("circle")\n   .filter(function(d){ return d == 12; }).style("fill","blue") *//the value 12 is a example*\n}\n</script>\n

\n\n

代码看起来像 (circle = \xc2\xb0 )

\n\n

\xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 (\xc2\xb0) <-特殊颜色

\n\n

\xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 (\xc2\xb0) <-特殊颜色

\n\n

\xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 \xc2\xb0 (\xc2\xb0) <-特殊颜色

\n\n

但它不适用于函数过滤器（毕竟没有它^^）。\n如果有人可以帮助我，那就太好了！\n问候

\n

Answer 1

您传递给过滤器的每个“d”对象都包含该圆的所有属性。如果要过滤特定索引，可以向过滤器传递两个参数：

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

如果要过滤 d 的属性，则需要使用点符号或括号符号来访问它。