D3.js 更新并输入D3JS

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

问题1）静态输入的“我已经在这里”的“p”保持原样。然而，我希望它能在“1”中更新

问题2）当我将数据重新输入html时，我希望结果是

1,2,3,4,1,2,3,4

。但是，输出是

我已经在这里了，2,3,4,2,3,4

。为什么在重新输入数据时跳过数据数组的第一个元素（1）

你知道吗

以下是我的html文件的正文：

结果如下：

---

您可以找到JSFIDLE。

当您调用

enter

时，它只适用于新元素。因为你原来有一个“”，所以什么都没有发生。管理此问题的一种方法是执行以下操作：

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

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

如果您希望它为您提供

1234

，您将遇到一些问题，因为第一个元素已经存在，因此您将以

1234

结束。您必须使数据集更大，这可以使用

concat

轻松完成，如下所示：

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

---

你可以这样想：

• 您的

  selectAll

  将获取所有现有的

• enter

  将对任何新事物产生影响，即比第一个

• 完成

  enter

  操作后，在

  段落上调用
  text
  ，这是一种更新所有元素的方法

当你再次调用

enter

时，它又一次只检查了缺失的部分，这就是为什么你只得到了2-4

我希望这会有所帮助。

这可能会有所帮助

I was already here

2

3

4

2

3

4

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

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

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