个人中心
gpt4 book ai didi

javascript - D3.js 饼图 II - 来自范围类型输入的动态值

转载 作者：行者123 更新时间：2023-11-28 13:43:10 24 4
gpt4 key购买 nike

我想将动态值传递到 D3 生成的饼图 ( http://bl.ocks.org/mbostock/1346410 )，但我在直接输入范围字段的值时遇到问题。传递它，然后通过示例单选按钮更新图表 onchange 工作正常。

我尝试过更换

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>

关于javascript - D3.js 饼图 II - 来自范围类型输入的动态值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16384115/

24 4 0
文章推荐： 带有 AND 和 OR 的 JavaScript if 语句
文章推荐： html - 3 列 DIV 之间的间距
文章推荐： css - 如何在
  • 标签内设置此 div 和链接的样式？
    • 文章推荐： javascript - 无法理解为什么这个 javascript 不起作用
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com