Question

我正在尝试通过滑块更改圆的颜色属性。首先，我调用函数drawCircle(red)，其中red是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.所以我从这个example创建了一个滑块。

    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(" + 600 + "," + 200 + ")");

    slider.append("line")
    .attr("class", "track")
    .attr("x1", sliderScale.range()[0])
    .attr("x2", sliderScale.range()[1])
    .select(function() { return 
     this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-inset")
    .select(function() { return 
    this.parentNode.appendChild(this.cloneNode(true)); })
    .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));
        drawCircle(h);
    }

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

Answer 1

我为你的代码做了一些重构。把它放在jsfiddle上 - https://jsfiddle.net/kdj9xq98/ 它有效：

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);
}

使用D3滑块更改属性

1 个答案: