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

Question

这explainer展示了如何使用 d3.js 样式属性来改变圆的外观(填充颜色、描边颜色、描边宽度等)。

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

Answer 1

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

但是，如果你指定一个 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 

/*External styles*/

circle {
  fill: green;
  r: 50;
}

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