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

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

javascript d3.js

Javascript D3：数据，输入，追加模式将数据添加到外部块,javascript,d3.js,append,enter,Javascript,D3.js,Append,Enter,我正在使用D3JavaScript库来呈现一些基本的web图表。我想将三个元素添加到块中，但D3将把元素添加到块的末尾。以下是完整的html源代码： <!DOCTYPE html> <meta charset="utf-8"> <body> <script src="d3.v2.js"></script> <script> var chartData = [ 1, 2, 3 ]; d3.select("html").sele

我正在使用D3JavaScript库来呈现一些基本的web图表。我想将三个

元素添加到

块中，但D3将把元素添加到

块的末尾。以下是完整的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>


var chartData=[1,2,3]；
d3.选择（“html”）.选择（“正文”）.追加（“svg”）
.data（chartData，函数（d）{console.log（“数据d:，d）；返回d；}）
.输入（）
.append（“路径”）
.attr（“d”，函数（d）{return d；}）；

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>


var chartData=[1,2,3]；
d3.选择（“html”）.选择（“正文”）.追加（“svg”）
.data（chartData，函数（d）{console.log（“数据d:，d）；返回d；}）
.输入（）
.append（“路径”）
.attr（“d”，函数（d）{return d；}）；

已创建

块，但由于某些原因，

块不在其范围内。如何更正此错误，并将它们放在它们所属的

中？

首先，您应该有一个只引用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教程：

供未来有类似问题的访问者参考：

在这种情况下，

select

和

selectAll

之间的行为差异似乎取决于

selectAll

创建一个新组的事实

D3的选择对象是一个数组，其中包含一些额外的特殊属性。每个数组对应一组对象。组的一个属性是

parentNode

，它是执行初始

selectAll

的节点

当最外面的选择是

select

时，根隐式地是文档的根节点——在本例中是

html

由于

selectAll

在选择中为每个匹配项（或条目）创建了一个新组，因此每个组都被指定为其父节点，即其派生节点。使用

select

，由于没有创建新组，因此每个组的原始

parentNode

将被保留，即使它不再准确地表示组中节点的父节点

parentNode

也（根据经验）显示为

enter

selections'

append

ed节点所附加的节点

这就是为什么

select

产生了观察到的行为，而

selectAll

解决了这个问题。

谢谢！原来

.selectAll（“路径”）

是缺少的关键部分。