Javascript 更新d3.js中的饼图

我在StackOverflow中搜索了许多更新饼图的示例，并查看了d3.js中与更新饼图相关的d3.js块，但我似乎无法使用d3.js版本4进行简单的更新。我肯定我遗漏了一些重要的东西，但我看不出来。其想法是，单击“更新”按钮只会将数据更改为不同的集合，而不同的集合只有一个元素不同。我有一个Fiddle（），它显示了我目前正在运行（或不运行，视情况而定）的代码

对update函数的初始调用基于第一个数据集创建饼图，但由“update”按钮启动的第二个调用不执行任何操作。我知道饼图生成器正在生成正确的对象（我检查了要检查的对象），但没有重新绘制任何路径

代码如下：

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();

---

现在，在更新函数中只有一个“进入”和一个“退出”选项

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

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();

这是您的最新（非双关语）小提琴：

和堆栈代码段中的相同代码：

var pieGenerator=d3.pie（）
.价值（功能（d）{
返回d.数量；
})
.排序（功能（a、b）{
返回a.name.localeCompare（b.name）；
});
风险值=[{
名字：'苹果'，
数量：20
}, {
名称：“香蕉”，
数量：40
}, {
名称：“樱桃”，
数量：50
}, {
姓名：“Damsons”，
数量：10
}, {
名字：“接骨木”，
数量：30
}, ];
变量2=[{
名称：“蓝莓”，
数量：40
}, {
名称：“香蕉”，
数量：40
}, {
名称：“樱桃”，
数量：50
}, {
姓名：“Damsons”，
数量：10
}, {
名字：“接骨木”，
数量：30
}, ];
函数doUpdate（）{
更新（2）；
}
//使用配置创建电弧发生器
var arcGenerator=d3.arc（）
.内半径（75）
.外层（200）
.padAngle（.02）
.焊盘半径（100）
.转弯半径（4）；
函数更新（myData）{
var arcData=pieGenerator（myData）；
var colorDomain=myData.map（函数（a）{
返回a.name；
});
var colorScale=d3.scaleOrdinal（）
.domain（colorDomain）
.range（['#ff2800'、'#58595B'、'#006c93'、'#8D2048'、'#00746F']））
//创建一个path元素并设置其d属性
变量u=d3。选择（'g'）
.selectAll（'path'）；
u、 数据（arcData）
.输入（）
.append（'路径'）
.合并（u）
.attr（'d'，电弧发生器）
.每个功能（d）{
d3.选择（本）
.样式（“填充”，功能（d）{
返回色标（d.data.name）；
})
});
u、 退出（）.remove（）；
}
更新（水果）
路径{
填充物：橙色；
笔画：白色；
}
正文{
字体系列：“Helvetica Neue”，Helvetica，无衬线；
字体大小：12px；
字体大小：粗体；
填充物：白色；
文本锚定：中间；
}

更新
现在，您的更新功能中只有一个“输入”和一个“退出”选项

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

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();

这是您的最新（非双关语）小提琴：

和堆栈代码段中的相同代码：


var pieGenerator=d3.pie（）
.价值（功能（d）{
返回d.数量；
})
.排序（功能（a、b）{
返回a.name.localeCompare（b.name）；
});
风险值=[{
名字：'苹果'，
数量：20
}, {
名称：“香蕉”，
数量：40
}, {
名称：“樱桃”，
数量：50
}, {
姓名：“Damsons”，
数量：10
}, {
名字：“接骨木”，
数量：30
}, ];
变量2=[{
名称：“蓝莓”，
数量：40
}, {
名称：“香蕉”，
数量：40
}, {
名称：“樱桃”，
数量：50
}, {
姓名：“Damsons”，
数量：10
}, {
名字：“接骨木”，
数量：30
}, ];
函数doUpdate（）{
更新（2）；
}
//使用配置创建电弧发生器
var arcGenerator=d3.arc（）
.内半径（75）
.外层（200）
.padAngle（.02）
.焊盘半径（100）
.转弯半径（4）；
函数更新（myData）{
var arcData=pieGenerator（myData）；
var colorDomain=myData.map（函数（a）{
返回a.name；
});
var colorScale=d3.scaleOrdinal（）
.domain（colorDomain）
.range（['#ff2800'、'#58595B'、'#006c93'、'#8D2048'、'#00746F']））
//创建一个path元素并设置其d属性
变量u=d3。选择（'g'）
.selectAll（'path'）；
u、 数据（arcData）
.输入（）
.append（'路径'）
.合并（u）
.attr（'d'，电弧发生器）
.每个功能（d）{
d3.选择（本）
.样式（“填充”，功能（d）{
返回色标（d.data.name）；
})
});
u、 退出（）.remove（）；
}
更新（水果）
路径{
填充物：橙色；
笔画：白色；
}
正文{
字体系列：“Helvetica Neue”，Helvetica，无衬线；
字体大小：12px；
字体大小：粗体；
填充物：白色；
文本锚定：中间；
}

更新