d3.js - 使用“selectAll”和“select”问题更改样式

Question

我正在尝试更改某些 svg 元素的样式。当我这样做时：

var circleSelected = d3.select("#circleid_2");
        circleSelected.style("fill", "purple");
        circleSelected.style("stroke-width", 5);
        circleSelected.style("stroke", "red");

圆圈正在改变它的风格。

但是，当我这样做时：

 var allCircles = d3.selectAll(".circle");
        allCircles.forEach(function (circle) {
            circle.style("fill", "green"); //function(d) { return getNodeColor(d); }
        });

它不适用于错误：Object [object SVGCircleElement] has no method 'style'

这是我的“圈子”声明（注意：它同时具有类和 id）：

node.append("circle")
            .attr("id", function (d) { return "circleid_" + d.id; })
            .attr("class", "circle")
            .attr("cx", function (d) { return 0; })
            .attr("cy", function (d) { return 0; })
            .attr("r", function (d) { return getNodeSize(d); })
            .style("fill", function (d) { return getNodeColor(d); })
            .style("stroke", function (d) { return getNodeStrokeColor(d); })
            .style("stroke-width", function (d) { return getNodeStrokeWidth(d); });

我在这里做错了什么？谢谢您的帮助！

Answer 1

尝试：

d3.selectAll("circle").style("fill", "green");

或者：

allCircles.style("fill", "PaleGoldenRod");

说明：d3.selectAll将返回一个选择，可以使用此 API 中描述的功能对其进行操作：https ://github.com/d3/d3/blob/master/API.md#selections-d3-selection

但是，一旦您这样做forEach，每次返回的内部变量都circle将是一个实际的 DOM 元素 - 不再是选择，因此没有style附加函数。