使用范围滑块更改SVG圆的半径

Question

所以这个脚本基本上使用范围滑块的输出来更改SVG圆的半径。有两个圆，但是调整滑块时只有一个圆的大小发生变化。

var slider = document.getElementById("myRange");
var output = document.getElementById("circle_radius");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
update(this.value)
}
var c1 = d3.select("circle")
var c2 = d3.select("circle1")
function update(update_radius) {
c1.transition()
.ease(d3.easeLinear)
.duration(2000)
.delay(100)
.attr("r", update_radius)
c2.transition()
.ease(d3.easeLinear)
.duration(2000)
.attr("r",update_radius)
}

Answer 1

您的问题是d3.select。您正试图选择像<circle1>这样的元素，而不是id或类。

您应该将id属性添加到您的圆中，并按id对其进行select。

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle1" cx="50" cy="50" r="50"/>
</svg>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle id="circle2" cx="50" cy="50" r="50"/>
</svg>

然后你可以做

var c1 = d3.select("#circle1")
var c2 = d3.select("#circle2")

Answer 2

由于您只对第二个圆进行延迟，因此这里有一个更通用的解决方案用一个类对相关圆圈进行分组：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle class="slider-circle" cx="50" cy="50" r="50"/>
<circle class="slider-circle" cx="50" cy="50" r="50"/>
</svg>

然后，使用对所有圆的选择，根据索引以的延迟转换它们：

var circles = d3.selectAll(".slider-circle")
function update(update_radius) {
circles.transition()
.ease(d3.easeLinear)
.duration(2000)
.delay((d, i) => i * 100) // i = 0, delay = 0; i = 1, delay = 100
.attr("r", update_radius)
}