Может ли радиус круга d3.js задаваться атрибутом стиля?

Question

В этом explainer показано, как атрибуты стиля d3.js могут использоваться для изменения внешнего вида круга (fillcolor, stroke-color, stroke-width и т. Д.).

Можно ли задать радиус круга 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>

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>`