5

我正在使用 D3 javascript 库来呈现一些基本的网络图表。我想将三个<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>它们所属的地方？

4

2 回答 2

5

首先，您应该有一个仅引用 svg 的高级变量。其次，您应该在创建 SVG 时指定它的高度和宽度。您不需要指定一个 select 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/

于 2012-12-01T23:47:24.470 回答
4

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

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

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

当最外面的选择是 aselect时，根隐含地是文档的根节点——在这种情况下，html。

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

parentNode也似乎（根据经验）是enterselections 的append节点所附加的节点。

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

于 2014-07-30T14:05:26.030 回答