javascript - 在 d3.js 中更新饼图

Question

我已经在 StackOverflow 中搜索了许多更新饼图的示例，并查看了与更新 d3.js 中饼图相关的 d3.js block ，但我似乎无法仅使用 d3 进行简单的更新。 Node.js 版本 4。我确信我错过了一些重要的东西，但我没有看到它。这个想法是，单击“更新”按钮只会将数据更改为不同的集合，该集合仅存在一个元素不同。我有一个 fiddle ( https://jsfiddle.net/qL9yy2b2/1/ )，它显示了我此时处于事件状态(或不活动状态，视情况而定)的代码。

对更新函数的初始调用会根据第一个数据集创建饼图，但由“更新”按钮启动的第二次调用不会执行任何操作。我知道饼图生成器正在生成正确的对象(我检查了该对象以进行检查)，但没有重新绘制路径。

代码如下:

var pieGenerator = d3.pie()
  .value(function(d) {return d.quantity;})
  .sort(function(a, b) {
    return a.name.localeCompare(b.name);
  });

var fruits = [
  {name: 'Apples', quantity: 20},
  {name: 'Bananas', quantity: 40},
  {name: 'Cherries', quantity: 50},
  {name: 'Damsons', quantity: 10},
  {name: 'Elderberries', quantity: 30},
];
var fruits2 = [
  {name: 'Blueberries', quantity: 40},
  {name: 'Bananas', quantity: 40},
  {name: 'Cherries', quantity: 50},
  {name: 'Damsons', quantity: 10},
  {name: 'Elderberries', quantity: 30},
];

var arcGenerator = d3.arc()
  .innerRadius(75)
  .outerRadius(200)
  .padAngle(.02)
  .padRadius(100)
  .cornerRadius(4);

function doUpdate() {
  update(fruits2);
}

function update(myData) {

  var arcData = pieGenerator(myData);
  var colorDomain = myData.map(function(a) {return a.name;});
  var colorScale = d3.scaleOrdinal()
    .domain(colorDomain)
    .range(['#ff2800','#58595B','#006c93','#8D2048','#00746F'])

  // Create a path element and set its d attribute
  var u = d3.select('g')
    .selectAll('path')
    .data(arcData);

  u.enter()
    .append('path')
    .attr('d', arcGenerator)
    .each(function(d){
      d3.select(this)
        .style('fill',function(d) {
          return colorScale(d.data.name);
        })
    });

  u.exit().remove();

Answer 1

现在，您的更新函数中只有“进入”和“退出”选择。

您必须创建一个“更新”选择，如下所示:

var u = d3.select('g')
    .selectAll('path');

u.data(arcData)
    .enter()
    .append('path')
    .merge(u)
    .attr('d', arcGenerator)
    .each(function(d) {
        d3.select(this)
            .style('fill', function(d) {
                return colorScale(d.data.name);
            })
    });

u.exit().remove();

这是您更新的(无双关语) fiddle :https://jsfiddle.net/qbjt80ts/

堆栈片段中的相同代码:

var pieGenerator = d3.pie()
  .value(function(d) {
    return d.quantity;
  })
  .sort(function(a, b) {
    return a.name.localeCompare(b.name);
  });

var fruits = [{
  name: 'Apples',
  quantity: 20
}, {
  name: 'Bananas',
  quantity: 40
}, {
  name: 'Cherries',
  quantity: 50
}, {
  name: 'Damsons',
  quantity: 10
}, {
  name: 'Elderberries',
  quantity: 30
}, ];
var fruits2 = [{
  name: 'Blueberries',
  quantity: 40
}, {
  name: 'Bananas',
  quantity: 40
}, {
  name: 'Cherries',
  quantity: 50
}, {
  name: 'Damsons',
  quantity: 10
}, {
  name: 'Elderberries',
  quantity: 30
}, ];

function doUpdate() {
  update(fruits2);
}

// Create an arc generator with configuration
var arcGenerator = d3.arc()
  .innerRadius(75)
  .outerRadius(200)
  .padAngle(.02)
  .padRadius(100)
  .cornerRadius(4);

function update(myData) {

  var arcData = pieGenerator(myData);
  var colorDomain = myData.map(function(a) {
    return a.name;
  });
  var colorScale = d3.scaleOrdinal()
    .domain(colorDomain)
    .range(['#ff2800', '#58595B', '#006c93', '#8D2048', '#00746F'])

  // Create a path element and set its d attribute
  var u = d3.select('g')
    .selectAll('path');

  u.data(arcData)
    .enter()
    .append('path')
    .merge(u)
    .attr('d', arcGenerator)
    .each(function(d) {
      d3.select(this)
        .style('fill', function(d) {
          return colorScale(d.data.name);
        })
    });

  u.exit().remove();
}
update(fruits);

path {
  fill: orange;
  stroke: white;
}

text {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  fill: white;
  text-anchor: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<div id="menu">
  <button onClick="doUpdate();">Update</button>
</div>
<svg width="700" height="500">
  <g transform="translate(300, 250)"></g>
</svg>