D3.js -岩石教程

特点

灵活性：提供强大的选择器和绑定机制，允许开发者对数据进行高度定制的可视化。
支持多种格式：支持 CSV、JSON、XML 等多种数据格式，方便数据导入。
动态更新：支持动态数据更新和交互，创建实时更新的可视化效果。
兼容性强：能够与 HTML、SVG 和 CSS 无缝集成，创建精美的图表和图形。
丰富的文档：提供详细的文档和大量的示例，帮助开发者快速上手。
社区支持：拥有活跃的社区，提供大量的插件和扩展功能。

使用场景

数据分析：用于数据分析和展示，生成各种数据可视化图表，如折线图、柱状图、散点图等。
实时监控：用于实时数据监控和展示，如股票价格、传感器数据等。
教育和培训：用于教学和培训，帮助学生理解数据可视化的概念和技术。
科研和报告：用于科学研究和报告生成，展示复杂的数据关系和趋势。
商业智能：用于商业智能和决策支持，生成动态和交互式的仪表盘。

安装方式

通过 npm 安装 D3.js：

npm install d3

通过 CDN 引入 D3.js：

<script src="https://d3js.org/d3.v7.min.js"></script>

使用示例

创建一个简单的柱状图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>D3.js Bar Chart Example</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="600" height="400"></svg>
  <script>
    var data = [30, 86, 168, 281, 303, 365];

    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

    var x = d3.scaleBand()
              .domain(data.map(function(d, i) { return i; }))
              .range([0, width])
              .padding(0.1);

    var y = d3.scaleLinear()
              .domain([0, d3.max(data)])
              .range([height, 0]);

    svg.selectAll(".bar")
       .data(data)
       .enter().append("rect")
       .attr("class", "bar")
       .attr("x", function(d, i) { return x(i); })
       .attr("y", function(d) { return y(d); })
       .attr("width", x.bandwidth())
       .attr("height", function(d) { return height - y(d); });
  </script>
</body>
</html>

创建一个散点图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>D3.js Scatter Plot Example</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <svg width="600" height="400"></svg>
  <script>
    var data = [
      {x: 30, y: 20},
      {x: 80, y: 90},
      {x: 50, y: 50},
      {x: 70, y: 80},
      {x: 100, y: 30},
      {x: 60, y: 40}
    ];

    var svg = d3.select("svg"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

    var x = d3.scaleLinear()
              .domain([0, 100])
              .range([0, width]);

    var y = d3.scaleLinear()
              .domain([0, 100])
              .range([height, 0]);

    svg.selectAll("circle")
       .data(data)
       .enter().append("circle")
       .attr("cx", function(d) { return x(d.x); })
       .attr("cy", function(d) { return y(d.y); })
       .attr("r", 5);
  </script>
</body>
</html>

常用 API 介绍

d3.select()：选择 DOM 元素。

d3.select("body").style("background-color", "black");

d3.selectAll()：选择所有符合条件的 DOM 元素。
```
d3.selectAll("p").style("color", "blue");
```

d3.scaleLinear()：创建一个线性比例尺。

var scale = d3.scaleLinear()
              .domain([0, 100])
              .range([0, 500]);

d3.scaleBand()：创建一个带状比例尺。

var scale = d3.scaleBand()
              .domain([0, 1, 2])
              .range([0, 100])
              .padding(0.1);

d3.axisBottom()：创建一个水平坐标轴。
```
var axis = d3.axisBottom(scale);
```
d3.axisLeft()：创建一个垂直坐标轴。
```
var axis = d3.axisLeft(scale);
```

d3.line()：创建一个折线生成器。

var line = d3.line()
             .x(function(d) { return x(d.x); })
             .y(function(d) { return y(d.y); });

d3.json()：加载 JSON 数据。

d3.json("data.json").then(function(data) {
  console.log(data);
});

d3.csv()：加载 CSV 数据。

d3.csv("data.csv").then(function(data) {
  console.log(data);
});

官方资料

D3.js 是一个功能强大且灵活的 JavaScript 库，适用于各种数据可视化需求。其丰富的 API 和高度可定制性，使得开发者可以创建复杂且交互式的数据可视化图表，提升 Web 应用的数据展示效果。