为什么此D3代码添加了< p>元素外的身体，而不是里面呢？ [英] Why does this D3 code add the <p> element outside the body, instead of inside it?
问题描述
我正在学习D3，并使用select运算符遇到一个问题。
I'm learning D3 and have come across an issue using the select operator.
具体来说，为什么下面的代码添加 ; p> 元素，而不是内部？
Specifically, why does the following code add the <p> element outside the body, instead of inside it?
var pData1 = d3.select ）.select（p）。data（[1]）enter（）。append（p）;
我使用一个完全空白的HTML文件，只需要< head> 和< body> / p>
I am using a totally blank HTML file with just <head> and <body> tags to test.
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body>
</body>
</html>
推荐答案
（这重复了Lars Kotthoff的回答， ）
(This repeats the content from Lars Kotthoff's answer, but I'd spent time creating the demo so I thought I'd still post.)
问题是 select ，与 selectAll 不同，不会为在 enter（）选择中添加的元素重新定义父元素。 / p>
The problem is that select, unlike selectAll, does not re-define the parent element for elements added in the enter() selection.
d3.select("body").select("p#a")
.data([1])
.enter().append("p").attr("id", "a")
.text("This paragraph is appended to <html> (the document root)
because no selectAll statement reset the parent element.");
d3.selectAll("p#b")
.data([1])
.enter().append("p").attr("id", "b")
.text("This paragraph is appended to <html>
because the selectAll statement is called directly on the root.");
d3.selectAll("body").select("p#c")
.data([1])
.enter().append("p").attr("id", "c")
.text("This paragraph is also appended to <html>
because the last selectAll statement was called directly from the root.");
d3.select("body").selectAll("p#d")
.data([1])
.enter().append("p").attr("id", "d")
.text("This paragraph is appended to <body>
because the selectAll statement is a sub-selection of the body selection.");
d3.selectAll("body").selectAll("p#e")
.data([1])
.enter().append("p").attr("id", "e")
.text("This paragraph is also appended to <body>
because the final selectAll statement is a sub-selection of the body.");
http://fiddle.jshell.net/eLF4H/
在之后使用输入链是不寻常的选择语句（与selectAll），因为如果要进行数据连接，通常是选择多个元素。但是，如果您要创建元素（如果元素不存在）或更新（如果元素），则有两个选项：
It is unusual to use an enter chain after a select statement (versus selectAll), because usually you are selecting multiple elements if you are going to do a data join. However, if you want to create the element if it doesn't exist or update it if it does, you have two options:
-
使用selectAll语句后跟数据加入
use a selectAll statement followed by the data join
var pdata1 = d3.select("body").selectAll("p#data")
//select element if it exists
.data([dataObject]);
//join to the current data
pdata1.enter().append("p").attr("id", "data");
//create element if required
pdata1.text(function(d){return d.textValue;});
//set or update the element based on the data
使用if语句创建元素（如有必要），然后使用 .datum（） 绑定数据
var pdata1 = d3.select("p#data")
//select element if it exists
if ( pdata1.empty() ) {
pdata1 = d3.select("body").append("p").attr("id", "data");
//create element if required
}
pdata1.datum(dataObject)
//note that you don't need to put the data into an array
.text(function(d){return d.textValue;});
//set or update the element based on the data
这篇关于为什么此D3代码添加了< p>元素外的身体，而不是里面呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
