[Erste Schritte mit d3.js] Elemente auswählen und Daten binden

Dieser Abschnitt stellt hauptsächlich vor, wie Elemente ausgewählt, Daten gebunden und DOM in D3.js bearbeitet werden. Dies ist der zentrale Teil von D3.js, und es ist auch ein wichtiger Inhalt, der die Grundlage für die spätere Visualisierung und interaktive Operationen legt.

Element auswählen

D3.js verwendet select()und selectAll()zum Auswählen von Elementen. select()Methode wird verwendet, um ein einzelnes Element auszuwählen, und selectAll()Methode wird verwendet, um mehrere Elemente auszuwählen. Beide Methoden akzeptieren CSS-Selektoren als Parameter.

Der folgende Code wählt beispielsweise das div-Element mit der ID myDiv aus:

d3.select("#myDiv")
复制代码

Daten binden

In D3.js können wir Daten an Elemente im Dokument binden, um entsprechende Elemente entsprechend dem Wert der Daten zu generieren, zu aktualisieren oder zu löschen. Verbindliche Datenverwendungsmethode data().

Der folgende Code bindet beispielsweise ein Array an das div-Element mit der ID myDiv:

var data = [1, 2, 3];
d3.select("#myDiv")
  .data(data);
复制代码

Manipulieren Sie das DOM

In D3.js können DOM-Elemente durch Methoden wie enter(), exit()und bearbeitet werden . remove()Darunter enter()wird das Verfahren verwendet, um neue Elemente zu erzeugen, exit()das Verfahren wird verwendet, um redundante Elemente zu löschen, und remove()das Verfahren wird verwendet, um spezifizierte Elemente zu löschen.

Der folgende Code fügt beispielsweise drei p-Elemente zu einem div mit der ID myDiv hinzu und legt ihre Textwerte fest:

var data = [1, 2, 3];
d3.select("#myDiv")
  .selectAll("p")
  .data(data)
  .enter()
  .append("p")
  .text(function(d) { return d; });
复制代码

Der obige Code wählt zuerst das div-Element aus, dessen ID myDiv ist, wählt dann das p-Element darin aus und bindet Daten daran. Da es vor der Datenbindung keine p-Elemente in diesem div gab, enter()wird die Methode aufgerufen, um ein neues Element zu erstellen. Verwenden Sie dann append()die Methode, um p-Elemente hinzuzufügen und ihre Textwerte über die Callback-Funktion festzulegen. Das Ergebnis sind drei p-Elemente, die jeweils 1, 2 und 3 enthalten.

Das Obige stellt eine kurze Einführung in die Auswahl von Elementen und Bindungsdaten von d3.js dar. Ausführlichere Inhalte finden Sie in der offiziellen D3.js-Dokumentation.

Häufig verwendete Selektoren und Filter in D3.js und die Verwendung von Kettensyntax zum Ausführen mehrerer Vorgänge.

Selektoren und Filter

D3.js unterstützt viele CSS-Selektoren und -Filter, wie zum Beispiel:

• *: Alle Elemente auswählen
• #id: Wählt das Element mit der angegebenen ID aus
• .class: Wählt Elemente mit dem angegebenen Klassennamen aus
• element: Elemente des angegebenen Typs auswählen
• [attribute=value]: Elemente mit angegebenen Attributwerten auswählen

例如，以下代码选择了所有含有class为myClass的p元素：

d3.selectAll("p.myClass")
复制代码

链式语法

由于D3.js的方法都返回选择集对象，因此可以使用链式语法来进行多次操作。例如，以下代码实现了让p元素的文本加粗并设置字体大小为20px的效果：

d3.selectAll("p")
  .style("font-weight", "bold")
  .style("font-size", "20px");
复制代码

以上代码首先选中所有p元素，然后依次调用style()方法来设置它们的样式。由于style()方法也返回选择集对象，因此可以继续使用链式语法来进行多次操作。

总之，选择元素和绑定数据是D3.js中非常重要的内容。掌握了这些核心概念，就能够灵活地使用D3.js来实现各种可视化效果。

D3.js中如何操作数据，并使用选择集来渲染可视化图形。

数据绑定

在D3.js中，可以使用datum()方法将数据绑定到单个元素上，也可以使用data()方法将数据绑定到一组元素上。例如：

// 绑定单个数据
var myData = 42;
d3.select("p")
  .datum(myData);

// 绑定一组数据
var myArray = [10, 20, 30, 40];
d3.selectAll("p")
  .data(myArray);
复制代码

在这些例子中，我们使用select()方法选中一个p元素，然后使用datum()方法将数据绑定到该元素上；同时，我们使用selectAll()方法选中一组p元素，然后使用data()方法将数据绑定到它们身上。

Enter-Update-Exit 模式

Enter-Update-Exit 模式是D3.js中非常重要的概念，用于处理数据的添加、更新和删除。该模式通常用于生成可视化图形，其核心思想是根据数据的不同状态（即是否存在）来对元素进行创建、更新和删除等操作。

Enter-Update-Exit 模式由以下几个部分组成：

• enter()：用于创建新元素和初始化属性。
• update()：用于更新元素的属性。
• exit()：用于删除不再需要的元素。

例如，以下代码使用Enter-Update-Exit 模式来对绑定的数据进行操作：

var myArray = [10, 20, 30, 40];

// Enter
d3.selectAll("p")
  .data(myArray)
  .enter()
  .append("p")
  .text(function(d) { return "Value: " + d; });

// Update
d3.selectAll("p")
  .data(myArray)
  .text(function(d) { return "Value: " + d; });

// Exit
d3.selectAll("p")
  .data(myArray)
  .exit()
  .remove();
复制代码

在这些例子中，我们首先使用selectAll()方法选中一组p元素，然后使用data()方法将数据绑定到它们身上。接着，我们使用enter()方法创建新的p元素，并使用append()方法将它们添加到文档中。此时，由于原来没有足够的p元素，因此会自动创建新的元素。接下来，我们使用update()方法来更新现有的p元素的文本内容；最后，我们使用exit()方法删除不再需要的p元素。

总之，掌握数据绑定和Enter-Update-Exit 模式是D3.js中非常重要的内容，能够帮助我们快速地生成各种复杂的可视化图形。

选择集

在D3.js中，可以使用选择集（Selection）来选中文档中的元素，并对这些元素进行操作。选择集本质上是一个数组，其中包含了表示被选中元素的DOM节点。

我们可以使用select()方法和selectAll()方法来创建选择集：

// 选择单个元素
var mySelection = d3.select("p");

// 选择多个元素
var mySelection = d3.selectAll("p");
复制代码

在这些例子中，我们使用select()方法选中一个p元素，并将其存储到mySelection变量中；同时，我们使用selectAll()方法选中文档中所有的p元素，并将它们存储到mySelection变量中。

选择集还有许多其他的方法，例如append()方法、attr()方法、style()方法等，它们可以用于创建新元素、设置/获取元素属性、修改CSS样式等操作。以下是一些常用的方法：

• append()：用于向选择集中添加新元素。
• attr()：用于设置或获取元素的属性。
• style()：用于设置或获取元素的CSS样式。
• text()：用于设置或获取元素的文本内容。
• html()：用于设置或获取元素的HTML内容。

例如，以下代码演示了如何使用选择集的一些基本方法：

// 创建新元素并设置属性
d3.select("body")
  .append("p")
  .attr("class", "my-paragraph")
  .text("Hello, D3.js!");

// 修改元素样式
d3.selectAll("p")
  .style("color", "blue")
  .style("font-size", "20px");

// 获取和设置元素的文本内容和HTML内容
var myText = d3.select("p").text();
d3.select("p").html("<strong>" + myText + "</strong>");
复制代码

在这些例子中，我们使用select()方法选中一个body元素，并使用append()方法创建一个新的p元素；接着，我们使用attr()方法设置了该元素的class属性，并使用text()方法设置其文本内容。接下来，我们使用selectAll()方法选中所有的p元素，并使用style()方法修改它们的CSS样式；同时，我们使用text()方法获取第一个p元素的文本内容，并使用html()方法将其加粗后赋值给该元素。

选择集是D3.js中非常重要的概念，能够帮助我们快速地选中、创建、修改和删除文档中的元素。

数据绑定和数据驱动

在D3.js中，可以使用data()方法将数据与选择集绑定，这样每个数据元素就会对应一个DOM元素。例如，我们有如下一个数组：

var dataset = [5, 10, 15, 20, 25];
复制代码

我们可以使用以下代码将该数组与文档中的p元素绑定起来：

d3.select("body")
  .selectAll("p")
  .data(dataset)
  .enter()
  .append("p")
  .text(function(d) {
    return d;
  });
复制代码

在这段代码中，我们先选中了文档中所有的p元素，然后使用data()方法将dataset数组绑定到选择集上。接着，我们使用enter()方法为尚未绑定数据的p元素创建占位符；最后，我们使用text()方法为每个p元素设置文本内容，其中传入的函数会自动获取相应的数据。

由于数据与DOM元素已经绑定，因此当我们更新数据时，相应的DOM元素也会得到更新。例如，以下代码改变了dataset数组的值并重新绑定数据：

// 改变数组数值
dataset[2] = 30;

// 重新绑定数据，更新元素
d3.selectAll("p")
  .data(dataset)
  .text(function(d) {
    return d;
  });
复制代码

从上面的例子中可以看出，D3.js是数据驱动的，这意味着我们可以通过修改数据来更新DOM元素，而不用手动操作文档中的元素。数据绑定是D3.js中非常重要的概念，它使得我们能够方便地将数据和可视化图表结合起来，实现动态、交互式的数据可视化效果。