Question

我有一个4元素数据集，并将这些数据附加到我页面中的div（请参阅下面的代码）。

问题1）静态输入＆＃34; p＆＃34; ＆＃34;我已经在这里＆＃34;保持原样。但是，我预计它会在＆＃34; 1＆＃34;。

中更新

问题2）当我将数据重新输入到html时，我希望结果为1, 2, 3, 4, 1, 2, 3, 4。但是，输出为I was already here, 2, 3, 4, 2, 3, 4。为什么重新输入数据时会跳过数据数组的第一个元素（1）？

你知道吗？

这是我的html文件的正文：

<div><p>I was already here</p></div>

这是我的javascript代码：

var data = [ 1, 2, 3, 4 ]
var svg = d3.select("body");
var paragraphs = svg.select("div").selectAll("p").data(data);
// data added
paragraphs.enter().append("p").text( function(d) { return d; });
// new items are added.
paragraphs.enter().append("p").text( function(d) {return d;});

输出如下：

I was already here

2

3

4

2

3

4

你可以找到jsfiddle here。

Answer 1

当您致电enter时，它仅适用于新元素。因为你有一个＆＃39;

＆＃39;最初，没有任何事情发生。管理这种方法的一种方法是执行以下操作：

// this adds the paragraphs that are missing
paragraphs.enter().append('p');

// This will update all text
paragraphs.text(function(d) { return d; });

如果您希望它为您1 2 3 4 1 2 3 4提供帮助，那么由于第一个元素已经存在，您将遇到一些问题，因此您最终会遇到1 2 3 4 2 3 4。您必须使数据集更大，这可以使用concat轻松完成，如下所示：

var paragraphs = svg.select("div").selectAll("p").data(data.concat(data));

Here's an updated fiddle

你可以这样想：

您的selectAll将获得所有现有的。
enter会对任何新内容进行处理，即所有内容都超过第一个<p>
在text完成paragraphs之后调用enter是更新所有元素

当你再次呼叫enter时，它再次只是通过缺失的那些，这就是为什么你只得到2 - 4。

我希望有所帮助。

更新并输入D3JS

1 个答案: