使用'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); }
        });

它不适用于错误:对象[对象SVGCircleElement]没有方法'style'

这是我的'圈'声明(注意:它有class和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附加功能.