d3.js入门__day1

安装

npm install d3

// 当前版本:"d3": "^7.9.0",

前置知识:

dom

svg

选取器：Selection

我們使用 d3.select 的 API 時，它會回傳一個集合物件（這邊通稱為 selection）。這個集合內可能有元素，也可能沒有元素 (是一個空集合)。而這個集合物件之後在資料綁定的過程，會透過 enter/exit 來決定實際上的節點數量

弄懂上面所说的之后，现在就来介绍一般最常用的两种 API 吧

• d3.select：选取符合欲选元素的第一个元素
• d3.selectAll：选取符合欲选元素的所有元素

// html
<div class="box1">
  <p>select 1</p>
  <p>select 2</p>
  <p>select 3</p>
  <p>select 4</p>
</div>

// js
d3.select('.box1 p').style('color', 'red');