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

Question

这个解释器显示了如何使用d3.js样式属性来改变圆的外观(fillcolor,stroke-color,stroke-width等).

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

Answer 1

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

但是,如果指定了一个attr("r"),但是你有一个css样式circle {r: 50;},那么样式表总是优先于属性.

但是,如果切换到using 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>