📌  相关文章
📜  D3.js-绘图图(1)

📅  最后修改于: 2023-12-03 15:30:21.323000             🧑  作者: Mango

D3.js-绘图图

D3.js是一个基于数据的JavaScript库，可以用来操纵文档、创建交互式图表和动画等。它可以与HTML、CSS和SVG等标准Web技术共同工作，方便地处理数据，并将其转换为漂亮的数据可视化图表。

安装

D3.js可以通过npm安装，也可以直接在HTML文件中引入它的cdn链接：

<script src="https://d3js.org/d3.v6.min.js"></script>
基础使用

以下是一个将数据展示成一个简单柱状图的基本示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <script>
        var data = [4, 8, 15, 16, 23, 42];

        d3.select("body")
            .selectAll("div")
            .data(data)
            .enter().append("div")
            .style("width", function(d) { return d*10 + "px"; })
            .text(function(d) { return d; });
    </script>
</body>
</html>

结果如下所示：

柱状图示例

在上面的代码中，我们使用了d3.select()选择器来选择文档中的body标签。接着，我们使用了selectAll()方法选择所有的div元素。接下来，我们将我们的数据(data)与选择的div元素绑定在一起，使用enter()方法创建了一个占位符的div。然后，我们使用了style()方法来定义每个div元素的宽度，并使用text()方法来设置每个元素的文本。

数据绑定

使用D3.js进行数据可视化最重要的一步是将数据绑定到对应的HTML标签上。下面是一个例子：

var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];

d3.select("body")
    .selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text(function(d) { return d; });

在上面的代码中，我们将一个包含五个数字的数组dataset绑定到了五个p元素上。我们首先使用d3.select()选择器来选取body元素，接着使用selectAll("p")选择所有的p元素，并使用data()方法将数组绑定到p元素上。enter()方法则会在p元素不足五个的情况下创建占位符的p元素。

常用图表

D3.js可以绘制多种类型的图表，包括折线图、散点图，饼图等。以下是几个常见的图表的绘制方法：

折线图
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 400 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");

var data = [
    {date: new Date("2021-01-01"), value: 10},
    {date: new Date("2021-01-02"), value: 15},
    {date: new Date("2021-01-03"), value: 5},
    {date: new Date("2021-01-04"), value: 20},
    {date: new Date("2021-01-05"), value: 8},
];

var x = d3.scaleTime()
          .domain(d3.extent(data, function(d) { return d.date; }))
          .range([0, width]);
svg.append("g")
   .attr("transform", "translate(0," + height + ")")
   .call(d3.axisBottom(x));

var y = d3.scaleLinear()
          .domain([0, d3.max(data, function(d) { return d.value })])
          .range([height, 0]);
svg.append("g")
   .call(d3.axisLeft(y));

svg.append("path")
   .datum(data)
   .attr("fill", "none")
   .attr("stroke", "steelblue")
   .attr("stroke-width", 1.5)
   .attr("d", d3.line()
       .x(function(d) { return x(d.date) })
       .y(function(d) { return y(d.value) })
);

结果如下所示：

折线图示例

在上面的代码中，我们定义了一个包含5个日期和数值的data数组。接着，我们使用d3.scaleTime()和d3.scaleLinear()创建了一个x和y的比例尺。我们将它们用于添加坐标轴，并使用d3.line()方法创建了一条折线路径。

饼图
var data = [10, 20, 30, 40, 50];

var width = 400,
    height = 400,
    radius = Math.min(width, height) / 2;

var color = d3.scaleOrdinal()
              .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var arc = d3.arc()
            .innerRadius(0)
            .outerRadius(radius);

var pie = d3.pie()
            .sort(null)
            .value(function(d) { return d; });

var g = svg.selectAll(".arc")
           .data(pie(data))
           .enter()
           .append("g")
           .attr("class", "arc");

g.append("path")
 .attr("d", arc)
 .style("fill", function(d) { return color(d.data); });

g.append("text")
 .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
 .attr("dy", ".35em")
 .text(function(d) { return d.data; });

结果如下所示：

饼图示例

在上面的代码中，我们定义了一个包含5个数字的data数组。接着，我们创建了一个颜色比例尺(color)、一个饼图生成器(pie)以及一个圆弧生成器(arc)，并绑定了data数组的数据。接下来，我们创建了一个用于存放每个圆弧和文字的g元素。我们使用append("path")方法添加了每个圆弧的路径，并使用append("text")方法添加了每个圆弧对应数字的文本到圆弧上方。

柱状图
var data = [4, 8, 15, 16, 23, 42];

var svg = d3.select("body")
            .append("svg")
            .attr("width", 420)
            .attr("height", 120);

svg.selectAll("rect")
   .data(data)
   .enter()
   .append("rect")
   .attr("x", function(d, i) { return i * 70; })
   .attr("y", function(d) { return 120 - (d * 5); })
   .attr("width", 65)
   .attr("height", function(d) { return d * 5; })
   .attr("fill", "steelblue");

svg.selectAll("text")
   .data(data)
   .enter()
   .append("text")
   .text(function(d) { return d; })
   .attr("x", function(d, i) { return i * 70 + 32; })
   .attr("y", function(d) { return 120 - (d * 5) - 3; })
   .attr("text-anchor", "middle");

结果如下所示：

柱状图示例

在上面的代码中，我们定义了一个包含6个数字的data数组。接着，我们创建了一个SVG元素(svg)。我们使用selectAll("rect")方法和append("rect")方法添加6个矩形元素，将它们绑定到data数组上，并使用每个数字作为高度和x/y坐标。接下来，我们使用selectAll("text")方法和append("text")方法添加6个文本元素，并将它们绑定到data数组上。我们使用每个数字作为文本，并使用它们的x/y坐标将它们置于每个矩形上方的中心点。

总结

D3.js是一个非常强大的工具，可以用于创建各种数据可视化图表。本文仅提供了一些基本示例，你可以根据自己的需要扩展和修改这些示例。在使用D3.js时，最重要的是了解绑定数据的方法以及创建比例尺和生成器的方法。希望本文能够为你提供一些参考。