javascript - 尝试用新数据更新 d3.js 圈子

Question

我最近开始尝试自学 D3，我要了解进入、更新、退出范式。

下面是我尝试使用的一些进度圈的示例；

http://plnkr.co/edit/OoIL8v6FemzjzoloJxtQ?p=preview

现在，因为这里的目的是更新圆形路径而不删除它们，我相信我不应该使用退出功能？在这种情况下，我的印象是我可以在一个新函数中更新我的数据源，然后调用路径转换，我会得到更新后的值。然而，事实并非如此。

我想知道是否有人可以帮助我并告诉我哪里出错了？

var dataset = [{
  "vendor-name": "HP",
  "overall-score": 45
}, {
  "vendor-name": "CQ",
  "overall-score": 86
}];

var dataset2 = [{
  "vendor-name": "HP",
  "overall-score": 22
}, {
  "vendor-name": "CQ",
  "overall-score": 46
}];

var width = 105,
  height = 105,
  innerRadius = 85;

var drawArc = d3.svg.arc()
  .innerRadius(innerRadius / 2)
  .outerRadius(width / 2)
  .startAngle(0);

var vis = d3.select("#chart").selectAll("svg")
  .data(dataset)
  .enter()
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

vis.append("circle")
  .attr("fill", "#ffffff")
  .attr("stroke", "#dfe5e6")
  .attr("stroke-width", 1)
  .attr('r', width / 2);

vis.append("path")
  .attr("fill", "#21addd")
  .attr('class', 'arc')
  .each(function(d) {
    d.endAngle = 0;
  })
  .attr('d', drawArc)

.transition()
  .duration(1200)
  .ease('linear')
  .call(arcTween);

vis.append('text')
  .text(0)
  .attr("class", "perc")
  .attr("text-anchor", "middle")
  .attr('font-size', '36px')
  .attr("y", +10)
  .transition()
  .duration(1200)
  .tween(".percentage", function(d) {
    var i = d3.interpolate(this.textContent, d['overall-score']),
      prec = (d.value + "").split("."),
      round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;
    return function(t) {
      this.textContent = Math.round(i(t) * round) / round + "%";
    };
  });


function updateChart() {
  vis = vis.data(dataset2)
  vis.selectAll("path")
    .transition()
    .duration(1200)
    .ease('linear')
    .call(arcTween);
  vis.selectAll('text')
    .transition()
    .duration(1200)
    .tween(".percentage", function(d) {
      var i = d3.interpolate(this.textContent, d['overall-score']),
        prec = (d.value + "").split("."),
        round = (prec.length > 1) ? Math.pow(10, prec[1].length) : 1;
      return function(t) {
        this.textContent = Math.round(i(t) * round) / round + "%";
      };
    });

}

function arcTween(transition, newAngle) {

  transition.attrTween("d", function(d) {

    var interpolate = d3.interpolate(0, 360 * (d['overall-score'] / 100) * Math.PI / 180);

    return function(t) {

      d.endAngle = interpolate(t)

      return drawArc(d);
    };
  });
}

非常感谢任何帮助/建议!

谢谢大家

Answer 1

您需要通过 DOM 刷新数据 - svg > g > path :

// SET DATA TO SVG  
var svg = d3.selectAll("svg")
            .data(selectedDataset)

// SET DATA TO G
var g = svg.selectAll('g')
           .data(function(d){return [d];})

// SET DATA TO PATH
var path = g.selectAll('path')
            .data(function(d){ return [d]; });

为每个步骤存储 d3 DOM 数据绑定(bind)对象，您可以控制 enter()、exit() 和 transition() 元素。将元素的变化属性放在 transition() 函数中:

// PATH ENTER
path.enter()
   .append("path")
   .attr("fill", "#21addd")
   .attr('class', 'arc')
// PATH TRANSITION
path.transition()
  .duration(1200)
  .ease('linear')
  .attr('d', function(d){ console.log(d);drawArc(d)})
  .call(arcTween);

http://plnkr.co/edit/gm2zpDdBdQZ62YHhDbLb?p=preview