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'

这是我的'圈'声明（注意：它有类和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函数

使用'selectAll'和'select'问题更改样式

1 个答案: