Javascript 使用D3滑块更改属性

我试图通过滑块更改圆的颜色属性。首先，我调用一个函数drawCirclered，其中红色是rgb中的r值

function drawCircle(red) {
            var circ = svg.selectAll(".circle")
                        .enter().append("circle")
                        .attr("cx", 100)
                        .attr("cy", 100)
                        .attr("r", 20)
                        .style("fill",  d3.rgb(red, 0, 0));
        }

        // Initial values on page load
        drawCircle(100);

这很好，但现在我想通过滑块将红色分量从0更改为255。所以我用这个做了一个滑块

---

我可以移动滑块，但颜色没有变化。

我对您的代码进行了重构。把它放在桌子上- 它的工作：

var svg = d3.select('#root').append('svg')
.attr('width', 400)
.attr('height', 400);

var circ = svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 20);

function fillCircle(red) {
  circ.style("fill", d3.rgb(red, 0, 0));
}

// Initial values on page load
fillCircle(100);

var sliderScale = d3.scaleLinear()
  .domain([0, 255]) // Red component goes from 0 to 255
  .range([0, 200]) // Width of slider is 200 px
  .clamp(true);

var slider = svg.append("g")
  .attr("class", "slider")
  .attr("transform", "translate(" + 13 + "," + 200 + ")");

slider.append("line")
  .attr("class", "track")
  .attr("x1", sliderScale.range()[0])
  .attr("x2", sliderScale.range()[1])
  .select(function() {
    return this.parentNode;
  })
  .append("line")
  .attr("x1", sliderScale.range()[0])
  .attr("x2", sliderScale.range()[1])
  .attr("class", "track-inset")
  .select(function() {
    return this.parentNode;
  })
  .append("line")
  .attr("x1", sliderScale.range()[0])
  .attr("x2", sliderScale.range()[1])
  .attr("class", "track-overlay")
  .call(d3.drag()
    .on("start.interrupt", function() {
      slider.interrupt();
    })
    .on("start drag", function() {
      changeRed(sliderScale.invert(d3.event.x));
    }));

var handle = slider.insert("circle", ".track-overlay")
  .attr("class", "handle")
  .attr("r", 9);

function changeRed(h) {
  handle.attr("cx", sliderScale(h));
  fillCircle(h);
}

var svg = d3.select('#root').append('svg')
.attr('width', 400)
.attr('height', 400);

var circ = svg.append("circle")
  .attr("cx", 100)
  .attr("cy", 100)
  .attr("r", 20);

function fillCircle(red) {
  circ.style("fill", d3.rgb(red, 0, 0));
}

// Initial values on page load
fillCircle(100);

var sliderScale = d3.scaleLinear()
  .domain([0, 255]) // Red component goes from 0 to 255
  .range([0, 200]) // Width of slider is 200 px
  .clamp(true);

var slider = svg.append("g")
  .attr("class", "slider")
  .attr("transform", "translate(" + 13 + "," + 200 + ")");

slider.append("line")
  .attr("class", "track")
  .attr("x1", sliderScale.range()[0])
  .attr("x2", sliderScale.range()[1])
  .select(function() {
    return this.parentNode;
  })
  .append("line")
  .attr("x1", sliderScale.range()[0])
  .attr("x2", sliderScale.range()[1])
  .attr("class", "track-inset")
  .select(function() {
    return this.parentNode;
  })
  .append("line")
  .attr("x1", sliderScale.range()[0])
  .attr("x2", sliderScale.range()[1])
  .attr("class", "track-overlay")
  .call(d3.drag()
    .on("start.interrupt", function() {
      slider.interrupt();
    })
    .on("start drag", function() {
      changeRed(sliderScale.invert(d3.event.x));
    }));

var handle = slider.insert("circle", ".track-overlay")
  .attr("class", "handle")
  .attr("r", 9);

function changeRed(h) {
  handle.attr("cx", sliderScale(h));
  fillCircle(h);
}