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 中的动态数据
<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 属性设置为相应的颜色。
评论