猫九

V1

2023/04/19阅读:41主题:默认主题

用 D3 实现数据可视化

D3是什么

数据驱动文档 用于在浏览器中创建动态和交互式数据视觉化的 JavaScript 库。

1.用 D3 给文档添加元素

选择元素: select() 
添加到文档中的元素: append()
设置所选节点的文本: text() 
eg:
	 d3.select("ul")
.        append("li")
.        text("Very important item");
eg:
   <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Learning D3</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <h1>Learning D3</h1>
  <script>
    const body = d3.select("body");
    body.append("p").text("Hello, World!");
  
</script>
</body>
</html>

2.用 D3 选择一组元素

selectAll() 方法选择一组元素
eg:
	d3.selectAll("li")
       .text("list item");

3.使用 D3 中的数据

data()选择连接着数据的 DOM 元素, 数据集作为参数传递给该方法。 eg:

   <body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>
  const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

  // 选择 body 节点
  const bodySelection = d3.select("body");

  // 选择所有的 h2 元素
  const h2Selection = bodySelection.selectAll("h2")
    .data(dataset)
    .enter()
    .append("h2")
    .text("New Title");
</script>
</body>

这段代码告诉 D3 先选择页面上的 ul 元素, 再选择所有的列表项,它将返回空。 然后 data() 方法接收数组作为参数,并运行三次后面的代码,每次对应数组中的一个对象。 enter() 方法发现页面中没有 li 元素,但是需要 3 个(每个对应 dataset 中的一个数据)。 新的 li 元素被追加到 ul,文本为 New item。

4.使用 D3 中的动态数据

text()
	以字符串或者回调函数作为参数
	eg
    <body>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>
  const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

  d3.select("body").selectAll("h2")
    .data(dataset)
    .enter()
    .append("h2")
    .text((d) => d + " USD");
</script>
</body>

使每个 h2 元素显示 dataset 数组中的对应值,加上一个空格和字符串 USD。 例如,第一个标题应该为 12 USD。

5.给元素添加内联样式

D3允许你使用 style() 方法在动态元素上添加内联 CSS 样式。

  d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text((d) => (d + " USD"))
.style("font-family""verdana");

将 style() 方法添加到编辑器中的代码中,使所有显示的文本都具有 verdana 的 font-family

6.根据数据更改样式

你想基于数据来改变元素的样式 可以在 style() 方法中使用包含条件逻辑的回调函数。 回调函数以 d 作为参数来表示一个数据点:

  d3.select("body").selectAll("h2")
  .data(dataset)
  .enter()
  .append("h2")
  .text((d) => (d + " USD"))
  .style("color", (d) => {
    if (d < 20) {
      return "red";
    } else {
      return "green";
    }
  });

在这个代码中,我们使用了一个回调函数来设置 color 属性。如果数据值小于 20,则返回字符串 "red",否则返回字符串 "green"。然后我们使用 style() 方法将 color 属性设置为相应的颜色。

分类:

前端

标签:

HTML

作者介绍

猫九
V1

学生