Javascript d3和x2B；图纸SVG和x2B；错误覆盖

这是我的2个图表，它在html视图中给出了如下内容：

<svg width="220" height="220">
<svg width="220" height="220">

---

注意：进一步的背景是，第一个svg是我正在工作的一个映射。我要做的是在上面创建一个图层，这个图层将是piecharts，在这个例子中只有2个，但是你必须从某个地方开始：）

你对结果的解释有点错误。第一个饼图不会被覆盖，它不会首先被渲染。在注释版本中，您为地图添加了svg，它工作良好，可以通过分配给它的

宽度

和

高度

值轻松识别

尝试为饼图添加svg时，您通过执行

d3选择正文中的所有svg。选择（“正文”）。选择全部（“svg”）

。此选择将包括前面附加的SVG。然后将数据绑定到将计算数据联接的选择。由于绑定的数据数组没有任何键函数，因此连接将基于索引。因此，现有SVG将对应于数据数组中的第一个元素，并将被置于更新选择中。由于您的代码仅适用于enter选择，因此不会绘制第一个饼图，因为它不属于此选择。第二个是预期的输出

解决这个问题的一种方法是对饼图使用CSS标记类。这样，您可以将第二个选择限制为具有标记类的SVG：

var svg2 = d3.select("body").selectAll("svg.pie")   // select with class "pie"
    .data(data)
    .enter().append("svg:svg")
    .attr("width", 220)
    .attr("height", 220)
    .classed("pie", true)                           // set marker class for all pie charts
    .append("svg:g")
    .attr("transform", "translate(" + 100 + "," + 100 + ")")

---

因为没有SVG具有类

饼图

，所以您的所有数据都将以enter选择结束，呈现一个SVG，该SVG包含预期的每个数据元素的饼图。我已经更新了你的图片以显示效果。

tks，我的理解是有缺陷的，我所希望的是馅饼会超过地图，但我想我想要一些不同的东西。我是否需要像

这样的东西，用大量的

制作地图部分，然后用自己的

标记在同一个svg中绘制馅饼？

var svg2 = d3.select("body").selectAll("svg.pie")   // select with class "pie"
    .data(data)
    .enter().append("svg:svg")
    .attr("width", 220)
    .attr("height", 220)
    .classed("pie", true)                           // set marker class for all pie charts
    .append("svg:g")
    .attr("transform", "translate(" + 100 + "," + 100 + ")")