饼状图II -动态值从范围类型输入

D3.js Pie Chart II - dynamic values from range type input

本文关键字：范围 类型 输入 动态 II      更新时间：2023-09-26

我想传递动态值到D3生成的饼图(http://bl.ocks.org/mbostock/1346410)，但我有麻烦直接喂养范围字段的值。传递它，然后通过示例单选按钮在更改时更新图表，工作良好。

我试着替换

d3.selectAll("input").on("change", change);


d3.select("#my_id").on("change", change);

，然后根据

修改函数change()
function change() {
        path = path.data(pie(dataset.salary));
        path.transition().duration(750).attrTween("d", arcTween);
    }

没有太多的爱

我错过了什么?

PS:这是输入字段，以防万一。这也调用了一个函数，该函数包含了上述所有函数和其他一些函数。

<input type="range" min="0" max="500000" name="dataset" id="salary" step="5000" value="salary" class="salary" onchange="calculate();" />

可能是一个非常典型的场景:睡一觉，不要废话，重新开始:

这当然可以进一步改进，但它现在可以工作了(注意，我保留了原来的行，注释掉了以突出显示更改):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body onload="getData()">
  <form>
    <input type="range" name="dataset" value="salary" in="0" max="10" step="1"  onchange="getData" />
  </form>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script>
      var salary_input = 3;
      function getData(salary){
        salary_input = document.forms[0].dataset.value;
        dataset.salary = [salary_input, 10 - salary_input];
        return dataset.salary;
      }

      var dataset = {
        salary:[5,5]
      }
    var width = 960,
        height = 500,
        radius = Math.min(width, height) / 2;
    var color = d3.scale.category20();
    var pie = d3.layout.pie()
        .sort(null);
    var arc = d3.svg.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius - 20);
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
      .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
    var path = svg.selectAll("path")
        // .data(pie(dataset.apples))
        .data(pie(dataset.salary))
      .enter().append("path")
        .attr("fill", function(d, i) { return color(i); })
        .attr("d", arc)
        .each(function(d) { this._current = d; }); // store the initial values
    d3.selectAll("input").on("change", change);
    // d3.select("#salary").on("change", change);
    var timeout = setTimeout(function() {
      // d3.select("input[value='"oranges'"]").property("checked", true).each(change);
      d3.select("input[value='"salary'"]").each(change);
    }, 2000);
    function change() {
      getData(salary_input);
      console.log(dataset.salary);
      clearTimeout(timeout);
      // path = path.data(pie(dataset[this.value])); // update the data
      path = path.data(pie(dataset.salary)); // update the data
      path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
    }
    // Store the displayed angles in _current.
    // Then, interpolate from _current to the new angles.
    // During the transition, _current is updated in-place by d3.interpolate.
    function arcTween(a) {
      var i = d3.interpolate(this._current, a);
      this._current = i(0);
      return function(t) {
        return arc(i(t));
      };
    }
  </script>
  </body>
</html>

@datafunk:除了根据我的需要添加一两个功能来说明外，我还将你的代码精简到最小的以使其更容易理解，因为有几个位没有做任何有用的事情，我也不喜欢转换(警告:我是d3新手，但我已经测试了这段代码):

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body>
<form><input type="range" name="r0" in="0" max="100" step="1" />
<br><input type="range" name="r1" in="0" max="100" step="1" />
<br><input type="range" name="r2" in="0" max="100" step="1" />
</form>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var dataset={salary:[50,50,50]};d3.selectAll("input[type='"range'"]").on("change",adjustPie);
function adjustPie() {
    dataset.salary=[parseInt(document.forms[0].r0.value),
            parseInt(document.forms[0].r1.value),
            parseInt(document.forms[0].r2.value)];//    console.log(dataset.salary);
    path.data(pie(dataset.salary)); // update the data
    path.attr("d",arc);//<<<Might replace with a transition as per @datafunk example
}
var width=400,height=400,r=Math.min(width,height)/2;
var color=d3.scale.category20c();d3.selectAll("input[type='"range'"]").style("width","400px");
var pie =d3.layout.pie()    .sort(null);
var svg =d3.select("body").append("svg")
    .attr("width",width)    .attr("height",height)
    .append("g")        .attr("transform", "translate("+r+","+r+")");//Make external margins and backgrounds with CSS on the SVG if you want them...
var arc =d3.svg.arc()       .outerRadius(r-20);//Sort of prototype for later arcs...?
var path=svg.selectAll("path")
    .data(pie(dataset.salary))
    .enter().append("path")//<<<For implementations allowing run-time addition of range controls, paths may need to be added/filled/coloured at run-time.
    .attr("fill",function(d,i){return color(i);})
    .attr("d",arc)//    .each(function(d){this._current=d;});//store the initial values (useful for transitions, see example by @datafunk)
adjustPie();
</script></body></html>
相关文章：