d3:数据到元素之间的映射

Posted 2020-09-23

在D3中，数据可视化的实质就是把数据映射到图形，那么，如何实现映射呢？D3的全称是Data Drive Document，即数据驱动文档，这意味着我们需要将数据值绑定到DOM元素上，绑定的意思意味着我们需要把数据附加或者绑定到DOM元素上，以便将来引用数据的值或者映射规则。

在数据与元素之间实现关联，即我们需要有相应的数据对象和DOM元素，然后通过D3的方法来实现关联，下面就来说说方法，返回值。

• d3：引用d3对象，从而能够调用其方法
• select("body")：选择一个css选择器，然后该方法将会返回DOM中匹配第一个元素的引用
• append("p")：创建一个新的元素，然后它会被追加到调用它的元素的末尾
• text("paragraph")：创建一段文本，它会被添加到当前元素的内容之间

即：d3.select("body")

          .append("p")

          .text("paragraph");

      通过这种连缀语法，我们就能够在body元素之间插入一个p标签，并且添加文本值paragraph。