javascript - 使用范围滑块更改 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)
}

标签： javascriptd3.js

Answer 1

您的问题与d3.select. 您正在尝试选择一个元素，<circle1>而不是 id 或类。

您应该将 id 属性添加到您的圈子中，并select改为通过 id 来添加。

<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")