javascript – 如何更新饼图？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 如何更新饼图？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4233字，纯文字阅读大概需要7分钟。

内容图文

我正在尝试制作一个饼图,当我按下“2016”按钮时会更新,但我不是更新我创建一个新的饼图,如何更改饼图的值？提前致谢.我试图搜索一个问题,但所有问题都是如此具体.

var dataset = [{
  key: "Alumnos",
  value: 15
}, {
  key: "AlumnosFCT",
  value: 12
}];
var w = 300;
var h = 300;
var outerRadius = w / 2;
var innerRadius = 0;

var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);


var color = d3.scale.ordinal()
  .domain([15, 12])
  .range(["#FF4081", "#3F51B5"]);

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) {
    return d.value;
  });

var arcs = svg.selectAll("g.arc")
  .data(pie(dataset))
  .enter()
  .append("g")
  .attr("class", "arc")
  .attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");

arcs.append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc);

arcs.append("text")
  .attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
  })
  .attr("text-anchor", "middle")
  .attr("font-family", "sans-serif")
  .text(function(d) {
    return d.value;
  });

d3.selectAll("button").on("click", function() {
  var paragraphID = d3.select(this).attr("id");
  if (paragraphID == "2016") {
    dataset.push({
      key: "Alumnos",
      value: 20
    }, {
      key: "AlumnosFCT",
      value: 18
    });
    dataset.shift();
    dataset.shift();
  }

  var arc = d3.svg.arc()
    .innerRadius(innerRadius)
    .outerRadius(outerRadius);


  var color = d3.scale.ordinal()
    .domain([15, 12])
    .range(["#FF4081", "#3F51B5"]);

  var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

  var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) {
      return d.value;
    });
  var arcs = svg.selectAll("g.arc")
    .data(pie(dataset))
    .enter()
    .append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");

  arcs.append("path")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc);
  arcs.append("text")
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .text(function(d) {
      return d.value;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<button id="2016">2016</button>

解决方法:

一般来说,只要你在他们的API中工作,d3就可以很好地管理DOM元素.通过这种方式,您可以编写一个可以为新数据创建新元素的函数,或者使用与这些元素相关的新数据更新现有元素.

请参阅以下更新版本的代码片段,特别是将依赖于数据的DOM操作转移到名为update的函数中：

/*** 
* Original Code
***/

var dataset = [{
  key: "Alumnos",
  value: 15
}, {
  key: "AlumnosFCT",
  value: 12
}];
var w = 300;
var h = 300;
var outerRadius = w / 2;
var innerRadius = 0;

var arc = d3.svg.arc()
  .innerRadius(innerRadius)
  .outerRadius(outerRadius);


var color = d3.scale.ordinal()
  .domain([15, 12])
  .range(["#FF4081", "#3F51B5"]);

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) {
    return d.value;
  });

/*** 
* update function for data dependent manipulations
***/
function update(data) {
  var arcs = svg.selectAll("g.arc").data(pie(data));
  arcs.exit().remove();
  arcs.enter().append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + outerRadius + ", " + outerRadius + ")");

  var paths = arcs.selectAll('path').data(function (d, i) {
    d.idx = i;
    return [d];
  })
  paths.enter().append('path');
  paths
  	.attr("fill", function(d) {
      return color(d.idx);
    })
    .attr("d", arc);
  
  var texts = arcs.selectAll('text').data(function (d) {
    return [d];
  })
  texts.enter().append('text');
  texts.attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .text(function(d) {
      return d.value;
    });
}

update(dataset);

/*** 
* Handler to set new data based on button clicked
***/
d3.select('button').on('click', function() {
  var newData;
  if (this.id === '2016') {
    newData = [{
      key: "Alumnos",
      value: 20
    }, {
      key: "AlumnosFCT",
      value: 18
    }];
    
    update(newData);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<button id="2016">2016</button>

(根据您的浏览器,您可能需要滚动视图才能看到“2016”按钮)

请注意以下优点：

>只有在调用更新时才会更新其数据需要更改的元素.
>如果在更新时添加新数据点,则会添加一个新元素,而不会触及应保持不变的元素(通过回车)
>如果在更新时删除数据点,则将删除该元素(通过退出)

d3版本：3.4.11

内容总结

以上是互联网集市为您收集整理的javascript – 如何更新饼图？全部内容，希望文章能够帮你解决javascript – 如何更新饼图？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端