首页 > 代码库 > d3:数据到元素之间的映射

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

在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。

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