Question

我正在使用D3 javascript库来呈现一些基本的Web图表。我想在<path>块中添加三个<svg>元素，但D3会将元素添加到<html>块的末尾。这是完整的HTML源代码：

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.v2.js"></script>
<script>
var chartData = [ 1, 2, 3 ];
d3.select("html").select("body").append("svg")
  .data(chartData, function(d) { console.log("data d:", d); return d; })
  .enter()
    .append("path")
      .attr("d", function(d) { return d; });
</script>
</body>

Chrome的开发者控制台会将生成的HTML显示为：

<html><head><meta charset="utf-8">
<style type="text/css"></style></head><body>
<script src="d3.v2.js"></script>
<script>
var chartData = [ 1, 2, 3 ];
d3.select("html").select("body").append("svg")
  .data(chartData, function(d) { console.log("data d:", d); return d; })
  .enter()
    .append("path")
      .attr("d", function(d) { return d; });
</script><svg></svg>
</body><path d="1"></path><path d="2"></path><path d="3"></path></html>

创建了<svg>块，但由于某种原因，<path>块不在其中。如何更正此错误，并将其置于<svg>所属的位置？

Answer 1

首先，你应该有一个只引用svg的高级变量。其次，您应该在创建SVG时指定SVG的高度和宽度。您无需指定html的选择，因此：

var width = 400,
    height = 300;
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

现在您可以使用svg变量追加路径。建议您将路径组合在一起（因此首先附加"g"）。您还应该为路径执行selectAll，因为您要将要添加的数据绑定到路径元素。所以：

svg.append("g").selectAll("path")
    .data(chartData)
  .enter().append("path")
    .attr("d", function(d) { return d; });

我推荐D3教程：http://alignedleft.com/tutorials/d3/

Answer 2

对于遇到类似问题的未来访客：

select和selectAll之间在这种情况下（以及类似的其他行为）的行为差异似乎取决于selectAll创建新群组的事实

D3的选择对象是一个包含一些额外特殊属性的数组。每个数组对应一组对象。该组的一个属性是parentNode，它是执行初始selectAll的节点。

当最外面的选择是select时，根隐含地是文档的根节点 - 在本例中是html。

由于selectAll在每个匹配（或条目）的选择中创建一个新组，因此每个组都被指定为其父节点，从中派生它。使用select时，由于未创建新组，因此即使不再准确地表示组中节点的父级，也会保留每个组的原始parentNode 。

parentNode也会（根据经验）显示为enter选择append个节点所附加的节点。

这就是select产生观察到的行为的原因，selectAll解决了这个问题。

D3：数据，输入，追加模式将数据添加到外部块

2 个答案: