Javascript 当更新的数据具有其他节时添加新路径

最近我在D3.js上做了很多工作，我越是使用它，我就越觉得我做错了每件事

目前，我正在尝试制作一个饼图，允许客户端按下按钮并在显示的信息之间切换。它的设置如下：

var width = 600,
    height = 675;

var outerRadius = 300,
    innerRadius = outerRadius / 3,
    color = d3.scale.category10();

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

var pieData = pie(dataDefault);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + outerRadius + "," + (outerRadius + 50) + ")");

svg.append("text")
    .attr("x", 0)
    .attr("y", -(outerRadius + 10))
    .style("text-anchor", "middle")
    .text("Distrubution of Default Usage");

svg.selectAll("a")
    .data(pieData)
  .enter().append("a")
    .attr("href", function (d, i) { return "" + dataDefault[i].label + "Stats.cshtml"; })
    .append("path")
    .each(function (d) { d.outerRadius = outerRadius - 20; })
    .attr("d", arc)
    .attr("fill", function (d, i) { return color(i); })
    .on("mouseover", arcTween(outerRadius, 0))
    .on("mouseout", arcTween(outerRadius - 20, 150))
        .append("title")
        .text(function (d) { return d.value + " hits"; });

注意一些特性可能很有用，单击一个片段链接到一个包含更多信息和特定数据的页面。在切片稍微生长的地方，它们有一个悬停效应

数据默认启动，然后一个按钮将其切换为“dataBrowser”

我将新数据传递到pie函数中，并将其传递到svg中

    var newData = pie(dataBrowser);
    var newColor = d3.scale.category20c();
    svg.selectAll("a")
         .data(newData)
         .attr("href", "#")
         .select("path")
         .each(function (d) { d.outerRadius = outerRadius - 20; })
         .transition()
         .attr("d", arc)
         .attr("fill", function (d, i) { return newColor(i); })
         .attr("title", function (d) { return d.value; });

（标题的更新不起作用，所以忽略它） 这将成功地更新饼图每个部分的大小，但不会为新信息添加新的饼图。如何从svg中添加（并随后删除）片段

---

提前谢谢

如果要创建新元素，需要附加它，最好是在“输入”选项中：

var newSlices = svg.selectAll("a")
    .data(newData);

newSlices.enter()
    .append("a")
    .attr("href", "#")
    .append("path")

newSlices.attr("href", "#")
    .select("path")
    .each(function(d) {
        d.outerRadius = outerRadius - 20;
    })
    .attr("d", arc)
    .attr("fill", function(d, i) {
        return newColor(i);
    })
    .attr("title", function(d) {
        return d.value;
    });

请注意，上面的代码片段依赖于D3V2和D3V3的“enter”选择的神奇行为，在D3V4.x中删除。在此新版本中，还必须设置“回车”选项的属性（或使用

merge（）

）

这是您的工作代码，带有调用更新的按钮：

var宽度=300，
高度=300；
var dataDefault=[{
“标签”：“，
“价值”：25
}, {
“标签”：“，
“价值”：25
}, {
“标签”：“，
“价值”：25
}, {
“标签”：“，
“价值”：25
}];
var outerRadius=100，
内半径=外半径/3，
颜色=d3.scale.category10（）；
var pie=d3.layout.pie（）
.价值（功能（d）{
返回d值；
});
var pieData=pie（dataDefault）；
var arc=d3.svg.arc（）
.内半径（内半径）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“转换”（“+outerRadius+”，“+（outerRadius+50）+”）；
svg.append（“文本”）
.attr（“x”，0）
.attr（“y”，-（外层+10））
.style（“文本锚定”、“中间”）
.text（“默认用法的分发”）；
svg.selectAll（“a”）
.数据（pieData）
.输入（）
.附加（“a”）
.attr（“href”，函数（d，i）{
返回“+dataDefault[i].label+”Stats.cshtml”；
})
.append（“路径”）
.每个功能（d）{
d、 外层=外层-20；
})
.attr（“d”，弧）
.attr（“填充”，函数（d，i）{
返回颜色（i）；
});
d3.选择（“按钮”）。在（“单击”上，函数（）{
变量数据浏览器=[{
“标签”：“边缘”，
“价值”：15
}, {
“标签”：“铬”，
“价值”：65
}, {
“标签”：“Safari”，
“价值”：30
}, {
“标签”：“Firefox”，
“价值”：40
}, {
“标签”：“其他”，
“价值”：40
}];
var newData=pie（数据浏览器）；
var newColor=d3.scale.category20（）；
var newSlices=svg.selectAll（“a”）
.数据（新数据）；
newSlices.enter（）
.附加（“a”）
.attr（“href”，“#”）
.append（“路径”）
newSlices.attr（“href”，“#”）
.选择（“路径”）
.每个功能（d）{
d、 外层=外层-20；
})
.attr（“d”，弧）
.attr（“填充”，函数（d，i）{
返回新颜色（i）；
})
.attr（“标题”，功能（d）{
返回d值；
});
})

点击

谢谢！现在，如果我切换回，如何删除访问路径？@RileyShaw您必须使用“退出”选项。这样地：

var newSlices = svg.selectAll("a")
    .data(newData);

newSlices.enter()
    .append("a")
    .attr("href", "#")
    .append("path")

newSlices.attr("href", "#")
    .select("path")
    .each(function(d) {
        d.outerRadius = outerRadius - 20;
    })
    .attr("d", arc)
    .attr("fill", function(d, i) {
        return newColor(i);
    })
    .attr("title", function(d) {
        return d.value;
    });