试图分析为什么没有发生这种转变

Question

我有以下改编的d3.js视觉，我无法弄清楚为什么转换不会触发。单击单选按钮时，ars应旋转到不同的大小。

似乎点击单选按钮正在改变弧的标题（如果我将光标悬停在每个上）

这部分代码应该受到责备吗？

// check if svg group already exists
var svg = d3.select("#sunGroup");
if (svg.empty()) {
  var svg = d3.select("#sunBurst")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr({
      'transform': "translate(" + width / 2 + "," + height * .52 + ")",
      id: "sunGroup"
    });
}

以下是完整的（非）工作示例：

https://plnkr.co/edit/hpvREU?p=preview

这是我试图坚持的过渡：plnkr.co/edit/NnQUAp?p=preview 我想要做的是将第128行（从d3.selectAll("input").on("change", function change() {...开始）的逻辑移出此函数

Answer 1

解决问题的一个简单方法是在切换数据类型时删除SVG的所有子项：

d3.select("#sunBurst").selectAll('*').remove()

这样，您就可以将新数据绑定到新元素。您还可以删除svg.empty()和d3.select('#sunGroup')代码。这个简单的修复程序允许您在饼图之间切换，并且符合您当前的代码精神。这是用户饼图。

但是，这可能不是您尝试实现目标的最佳方式。作为参考，请参阅Mike Bostock的General Update Pattern series（链接是本系列的第一篇），了解如何更新SVG。