Question

这个explainer显示了如何使用d3.js样式属性来改变圆的外观（fillcolor，stroke-color，stroke-width等）。

我可以使用样式属性设置d3.js圆的半径吗？

Answer 1

您可以将圆的半径设置为属性OR样式。

但是，如果您指定attr("r")，但是您的css样式（例如circle {r: 50;}），则样式表始终优先于style("r") 属性。

但是，如果您切换到使用//circle 1 d3.select("svg") .append("circle") .attr("cx", 50) .attr("cy", 50) .attr("r", 10); // Radius 10 as attribute //circle 2 d3.select("svg") .append("circle") .attr("cx", 150) .attr("cy", 50) .style("r", 10); //Radius 10 as inline style，那么特定于元素的样式具有优先级，因为它更具体，因为你会期待的。

因此，您可以根据优先级使用这些。

＆＃13;

/*External styles*/

circle {
  fill: green;
  r: 50;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg height=500 width=500></svg>

＆＃13;

argv[1]

＆＃13;

Answer 2

是的，你可以。但最好使用attr DOM value manipulations和style css。

             svg.selectAll(".dot")
                .data(data)
                .enter().append("circle")
                .attr("class", "dot")
                .style("r", 3)
                .attr("cx", function(d) {
                  return x(d.date);
                }
                )
                .attr("cy", function(d) {
                  return y(d.value);
                })
                .attr("stroke", function(d) {
                  return color(this.parentNode.__data__.name)
                })
                .attr("fill", function(d) {
                  return color(this.parentNode.__data__.name)
                })

Example使用style和example使用attr虽然两者的工作方式相同，但请查看structure of DOM。

使用attr：

`<circle class="dot" r="3" cx="0" cy="174.375" stroke="#1f77b4" fill="#1f77b4"></circle>`

使用style：

`<circle class="dot" cx="0" cy="174.375" stroke="#1f77b4" fill="#1f77b4" style="r: 3;"></circle>`

d3.js圆的半径可以由样式属性指定吗？

2 个答案: