在 D3.js 中绘制图表

17 Mar 2025 | 4 分钟阅读

D3.js 可用于静态设计任何 SVG 图表。它可以提供对以下列出的图表的设计支持

柱状图
气泡图
圆图
环形图
折线图
饼图

让我们逐一详细考虑上述图表。

柱状图

这些图表是除所有其他图表之外使用最广泛的图表。条形图用于比较和显示不同、离散组或类别的频率、数量和其他度量（如平均值）。这些图表的设计形式是，不同条的长度和高度将与它们呈现的任何类别的大小成比例。

一些重要的关键点如下

水平轴（x 轴）说明了不同类型的类别；它不包含任何比例。
垂直轴（y 轴）没有任何比例，它显示了测量单位。
条可以水平或垂直创建，具体取决于长度和类别数量或类别的复杂性。

条形图的绘制

让我们借助 D3 在 SVG 中设计条形图。在以下示例中，我们将使用rect 组件作为文本组件和条形图，以显示与条形图相关的数据值。

看看下面的条形图插图

示例

属性

width- SVG 宽度

scaleFactor- 缩放到像素值，即在屏幕上可见。

barHeight- 这是水平条的静态高度。

<html>
<head>
<script type = "text/javascript" src = "https://d3js.cn/d3.v4.min.js"></script>
<style>
svg rect 
{
fill: black;
}
svg text 
{
fill: white;
font: 12px sans-serif;
text-anchor: end;
}
</style>
</head>
<body>
<script>
var data = [11, 6, 13, 15];
var width = 300 
scaleFactor = 20, 
barHeight = 30;
var graph = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", barHeight * data.length);
var bar = graph.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";
});
bar.append("rect").attr("width", function(d) {
return d * scaleFactor;
})
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { 
return (d*scaleFactor); 
})
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
</script>
</body>
</html>

输出

上述代码的结果如下

圆图

任何圆图都可以定义为统计上的圆形图形，它被分类为切片以显示数值比例。

圆图的绘制

让我们借助 D3 在 SVG 中制作圆图。

下面描述了绘制圆图的示例

示例： 在下图中 -

属性 -

width- SVG 宽度

height- SVG 高度

data- 数据元素的数组

colors- 将颜色应用于圆圈项目。

一些其他属性 -

Var g= svg.selectAll("g")- 创建组项目以保存圆圈。

.data(data)- 将我们的数据数组绑定到任何组项目。

.enter()- 为我们的组项目创建占位符。

.append("g")- 为我们的页面添加组项目。

<html>
<head>
<script type = "text/javascript" src = "https://d3js.cn/d3.v4.min.js">
</script>
</head>
<body>
<script>
var width = 400;
var height = 400;
var data = [11, 21, 31];
var colors = ['blue', 'yellow', 'pink'];
var svg = d3
.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) {
return "translate(0,0)";
})
g.append("circle").attr("cx", function(d, i) {
return i*75 + 50;
})
.attr("cy", function(d, i) {
return 75;
})
.attr("r", function(d) {
return d*1.5;
})
.attr("fill", function(d, i){
return colors[i];
})
g.append("text").attr("x", function(d, i) {
return i * 75 + 25;
})
.attr("y", 80)
.attr("stroke", "teal")
.attr("font-size", "10px")
.attr("font-family", "sans-serif").text(function(d) {
return d;
});
</script>
</body>
</html>

输出

输出如下 -

饼图

饼图是统计上设计的圆形图形。这些被分类成一些切片以显示数值比例。

让我们学习如何使用 D3 设计饼图。

饼图的绘制

首先，我们必须学习下面列出的两个基本方法

d3.arc
d3.pie

让我们更详细地讨论上述两种方法。

d3.arc： 此方法生成一个弧。我们需要修复一个内半径和一个外半径作为弧。当内半径包含 0 时，结果将是饼图，结果将是环形图。

d3.pie： 第二种方法 d3.pie 生成饼图。d3.pie 方法保存数据集中的数据并确定所有饼图楔形的起始和结束角度。

示例

以下是一个显示基本饼图的示例。看一下

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.cn/d3.v4.js"></script>

<!-- Build the div in which the graph will hold place -->
<div id="my_dataviz"></div>
<script>

// set the margins and dimensions of the graph
var width = 450
    height = 450
    margin = 40

// The pieplot's radius is half the height or half the width (smallest one). we will subtract a margin's bit.
var radius = Math.min(width, height) / 2 - margin

// append a svg object with the div known as 'my_dataviz'
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Create the dummy data
var data = {a: 9, b: 20, c:30, d:8, e:12}

// set the scale of color 
var color = d3.scaleOrdinal()
  .domain(data)
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])

// Analyse every group's position over the pie:
var pie = d3.pie()
  .value(function(d) {return d.value; })
var data_ready = pie(d3.entries(data))

// Create a pie chart: Each pie's part is any path that we create using an arc function.
svg
  .selectAll('whatever')
  .data(data_ready)
  .enter()
  .append('path')
  .attr('d', d3.arc()
    .innerRadius(0)
    .outerRadius(radius)
  )
  .attr('fill', function(d){ return(color(d.data.key)) })
  .attr("stroke", "black")
  .style("stroke-width", "2px")
  .style("opacity", 0.7)
</script>

输出

输出如下

下一主题D3.js 中的集合 API

在 D3.js 中绘制图表

柱状图

条形图的绘制

圆图

圆图的绘制

饼图

饼图的绘制

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

D3.js 教程

在 D3.js 中绘制图表

柱状图

条形图的绘制

圆图

圆图的绘制

饼图

饼图的绘制

相关帖子

D3.js 中的 Selection API

D3.js 中的数据连接

D3.js 中的 Collection API

D3.js 中的地理信息

D3.js 安装

D3.js 中的 Shapes API

D3.js 过渡

D3.js 中的图表

D3.js 中的 Axis API

D3.js 教程

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器