前端可视化入门与实战:D3 高级图表实战:柱状图、折线图

这篇具有很好参考价值的文章主要介绍了前端可视化入门与实战:D3 高级图表实战:柱状图、折线图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端可视化入门与实战 - 谦宇 - 掘金小册

在上一节我们介绍了 SVG 的进阶使用及图表实现,但是单纯用 SVG 实现图表,会有一个很大的问题,就是没有规范,正规封装图表库,我们需要封装大量的基础类和通用方法,比如需要封装适配不同数据的比例尺。

如果我们前期不去做这些繁琐的基础工作,就会让后期维护越来越难,而 D3 的 V3 版本是基于 SVG 的,并且已经做了底层的封装,更方便我们维护和快速开发。本文将以为什么要用 D3 开始,然后深入浅出说明 D3 的用法,最后学以致用,一起来实现柱状图、多层级旋转标签柱状图、折线图、动态排序折线图。

为什么要用 D3

使用 D3.js 开发可视化图表有以下几个优点。

  1. 功能丰富:D3.js 提供了许多丰富的数据可视化功能,比如缩放、交互、布局、动画等等,能够帮助开发者快速创作各种类型的图表,并且容易扩展。

  2. 自定义程度高:使用 D3.js 可以灵活控制所有图表的元素,包括图形、轴、标签、交互等等,可根据业务需求随意定制化图表。

  3. 界面友好:D3.js 提供了类似 JQuery 的 DOM 操作方法,偏向函数式编程,使开发者能够方便地对图表进行操作,同时 D3 还提供了大量的样式和布局辅助方法,可以便捷地定义图表样式和布局。

  4. 社区活跃:D3.js 拥有庞大的开发社区,有大量 D3.js 的相关资料、代码示例和插件,能够帮助开发者更加高效地开发可视化图表。

  5. 兼容性好:D3.js 对各种浏览器的兼容性都很好,支持 IE6+ 和现代浏览器等多种浏览器,能够保证图表在各种不同浏览器环境下的稳定性和可用性。

理解数据驱动视图

我们知道 D3 这个库出色在于数据驱动视图的理念,那么如何理解呢?

在以往编写 SVG、Canvas 都需要一行一行编写样式和属性,并没有一个统一的数据管理,数据和视图关联性很弱。所以,在 D3 中强调数据,数据驱使视图的更新,在 D3 中数据和 DOM 元素进行绑定,并使用这些数据来更新元素的属性、样式、位置等,从而实现动态的数据可视化效果,说白了就是链式调用、状态封装来方便我们更新视图。

理解数据驱动视图的理念后,我们在绘图的时候要知道视图元素和数据是强绑定的。当知道数据是什么,通过 D3 可以反推出元素的坐标位置;当知道元素的坐标位置,也能知道数据 data 是多少。比如,要获取图上 x 轴的数据对应的 x 坐标,我们可以通过 xScale(value) 快速获取。

实现柱状图

了解完 D3 的开发优势及出色理念后,下面我们一起来“理论结合实践”,首先实现我们常用的柱状图。

其实,实现柱状图等其他图都会遵循一个套路

  • 定义数据集;
  • 定义绘图区域(安全边界 margin + 生成 SVG 的绘图区域);
  • 设置比例尺;
  • 生成坐标轴;
  • 绘制图元。

还是比较好理解的,对吧?接下来我们就按照这个“套路”,一步一步去实现我们想要的柱状图。

  1. 定义我们的数据集
 

js

复制代码

// 数据 const data = [ { label: "A", value: 20 }, { label: "B", value: 50 }, { label: "C", value: 30 }, { label: "D", value: 80 }, { label: "E", value: 40 }, ];

  1. 定义绘图区域。定义我们基础图表所在的 SVG 可视区域内部的某一块位置,一般我们理解为安全区域的边距,以防止图表某些元素丢失。
 

js

复制代码

// 配置 const margin = { top: 20, right: 20, bottom: 30, left: 40 }; const width = 960 - margin.left - margin.right; const height = 500 - margin.top - margin.bottom;

下面我们将添加我们的绘制区域,select 类似我们 querySelector 查找对应容器,设置宽和高,传入 g 标签(g 标签用于分组,类似 div),然后移动到对应位置。

 

js

复制代码

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

  1. 设置比例尺
 

js

复制代码

const x = d3.scaleBand() .domain(data.map(function (d) { return d.label; })) .range([0, width]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(data, function (d) { return d.value; })]) .range([height, 0]);

上文通过 scaleBand 离散数据的比例尺传入 domain(数据域) ,然后 range 定义值的范围,让每个 label 的值映射到 range 的 [0, width],最后设置 padding 代表柱子间的间距。在 Y 轴,我们一般是连续的值代表大小的关系,这个时候需要使用 scaleLinear 来实现。

为了更好地理解,下面我罗列了这些方法的解释。

  • scaleBand:D3 的比例尺游程,用于将离散的数据到连续的空间范围内,并按照一定的方式进行分组和排序。在柱状图、条形图等图表中,通常用于定义 x 轴的比例尺,将不同的类别或标签映射成一定的长度。

  • scaleLinear:D3 的线性比例尺,用于将连续的数据到连续的空间范围内。在柱状图、折线图等图表中,通常用于定义 y 轴的比例尺,将原始数据映射到实际的高度或者纵坐标位置上。

  • domain:比例尺的定义域,表示原始数据的范围。

  • range:比例尺的值域,表示将原始数据映射到的连续空间的范围。

  • paddingd3.scaleBand() 比例尺中的分组间距,即每组数据之间的空白宽度。

为了避免有小伙伴有疑问,这里我也额外简单介绍下“数据域”和“比例尺”。

数据域

在数据可视化中,通常使用坐标轴来表示数据的范围。数据范围指的是原始数据的取值范围,而数据域(或称值域)指的是数据在可视化过程中映射到画布上的范围

例如,假设有一个包含以下数据的数组:

[10, 20, 30, 40, 50]

这个数组的数据范围为 10 到 50。我们可以使用线性比例尺将这些数据映射到值域为 0 到 400 的可视化空间上。在这种情况下,数据点 10 将映射到像素 0,数据点 50 将映射到像素 400。每个数据点在值域中对应了一个唯一的像素位置。

比例尺

比例尺(Scale)是一种将数据值映射到视觉表示时使用的函数。它们将输入域(例如数据的原始值)中的值映射到输出域(例如图表的坐标轴长度或颜色)中的值,以便更好地表现数据的分布和关系。

以下是其中几种比例尺的标准:

  • 线性比例尺,将坐标轴上的数据线性地映射到屏幕上的像素值。例如,如果数据范围从 0 到 100,则比例尺将保持数据点之间的线性距离。这意味着在图表上,两个数据点之间的距离和它们在坐标轴上的距离是成比例的。线性比例尺适用于大多数情况,可以处理常规的数据范围。
  • 对数比例尺,将坐标轴上的数据按对数比例映射到屏幕上的像素值。对数比例尺的作用是将取值范围很宽的数据,压缩到一个较小的范围,以便更好地可视化。适合处理数据取值范围较大,或者存在比例差异较大的场景。
  • 时间比例尺,将坐标轴上的时间数据映射到屏幕上的像素值。时间比例尺通常用于可视化时间序列数据,如股票价格、气象数据等。以时间为坐标轴的数据,需要按照特定的粒度进行组织和映射,如按天、按周、按月等。
  1. 生成坐标轴
 

go

复制代码

// X轴 svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); // Y轴 svg.append("g") .attr("class", "y axis") .call(d3.axisLeft(y).ticks(10));

这里需要注意 call 的用法用于修改 this 的指向,这里可以简单理解为将 SVG 的对象 this 绑定到 d3.axisBottom(x) 返回的构造函数上,也就意味着这个构造函数可以直接操作 SVG 对象,而不用多余传入 SVG 对象。

  1. 绘制柱体

下面这段代码的意思是,选择 SVG 上所有 class 为 bar 的元素,若不存在则创建。然后将数据与选择集绑定,由于元素未创建使用 enter 来创建占位的节点,append 传入 rect 代表创建矩形,最后定义类名、坐标、宽高。

 

js

复制代码

// 柱形 svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function (d) { return x(d.label); }) .attr("y", function (d) { return y(d.value); }) .attr("width", x.bandwidth()) .attr("height", function (d) { return height - y(d.value); });

绘制效果如下:

实现多层级旋转标签柱状图

ECharts 的柱状图示例

有了上文的基础,我们接下来将要实现一个相对复杂业务场景下的 ECharts 的柱状图示例:

首先,我们要清楚这里只不过分了 4 个组,每个组放了 4 个季度的柱子,而柱子的间距我们可以通过 padding 来实现。初学者可能很喜欢用循环来将每组进行定位,其实在 D3 处理这些十分简单,我们可以像下面这样不断用类似同步的写法避免嵌套,这样的代码十分容易维护。

 

js

复制代码

const group = chart.selectAll(".group").data(data) group.selectAll("rect")

下面是代码的整体实现:

 

js

复制代码

// 定义数据结构 // 定义数据结构 const data = [ { label: "2020", season: [ { label: "Q1", value: 300 }, { label: "Q2", value: 220 }, { label: "Q3", value: 80 }, { label: "Q4", value: 400 }, ], }, { label: "2021", season: [ { label: "Q1", value: 100 }, { label: "Q2", value: 20 }, { label: "Q3", value: 120 }, { label: "Q4", value: 20 }, ], }, { label: "2022", season: [ { label: "Q1", value: 100 }, { label: "Q2", value: 20 }, { label: "Q3", value: 120 }, { label: "Q4", value: 20 }, ], }, { label: "2023", season: [ { label: "Q1", value: 100 }, { label: "Q2", value: 20 }, { label: "Q3", value: 120 }, { label: "Q4", value: 20 }, ], }, ]; // 每年4个季度 const seasonLen = 4 // 统计年的数量 const yearLen = data.length const colors = ['#5470C6', '#91CC75', '#fac858', '#ee6666'] const svgWidth = 960; const svgHeight = 500; // 定义图幅大小 const margin = { top: 50, right: 50, bottom: 50, left: 50 }; const chartWidth = svgWidth - margin.left - margin.right; const chartHeight = svgHeight - margin.top - margin.bottom; const svg = d3.select("svg") .attr("width", svgWidth) .attr("height", svgHeight); // 创建比例尺 const xScale = d3.scaleBand() .domain(data.map(d => d.label)) .range([0, chartWidth]) .padding(.2) const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d3.max(d.season, s => s.value))]) .range([chartHeight, 0]); // 获取每个柱子的宽度 const columWidth = (xScale.bandwidth() / seasonLen) // 创建图表的根节点 const chart = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // 创建坐标轴 chart.append("g") .attr("transform", `translate(0,${chartHeight})`) .call(d3.axisBottom(xScale)); chart.append("g") .call(d3.axisLeft(yScale)); // 创建group组,存不同年份的分组节点 const group = chart.selectAll(".group") .data(data) .enter() .append("g") .attr("class", "group") .attr("transform", (d) => `translate(${xScale(d.label) + columWidth},0)`); // 在这些分组节点中,插入每个季度的rect节点 group.selectAll("rect") .data(d => d.season) .enter() .append("rect") .style('fill', (d, i) => colors[i]) .attr("x", d => columWidth * (["Q1", "Q2", "Q3", "Q4"].indexOf(d.label) - 1)) .attr("y", d => yScale(d.value)) .attr("width", xScale.bandwidth() / seasonLen) .attr("height", d => chartHeight - yScale(d.value));

实现效果如下:

坐标轴优化

我们可以发现坐标轴出了细节问题,我们需要去除 x 轴和 y 轴的刻度细线。

我们可以用 tickSizeOuter 清除 x 轴两端的刻度。用 tickSize 清除内部的刻度,在 y 轴我们控制下间隔后,同样清除下两端刻度。

 

js

复制代码

d3.axisBottom(xScale).tickSizeOuter(0) d3.axisLeft(yScale).ticks(5).tickSizeOuter(0)

辅助线优化

另外,y 轴的辅助线怎么实现呢?

其实我们可以利用刻度,因为刻度本身就是 line 标签,修改 x2 的坐标值来生成 y 轴的辅助线。这里有个需要注意的地方,在生成辅助线的时候要排除 y 轴的 0 值辅助线,因为该辅助线会和 x 轴重合。

 

js

复制代码

// 这里我们可以巧妙使用y轴刻度,因为本质就是line标签,修改x2的坐标值即可 chart.selectAll(".y-axis .tick line").filter((d, i) => i > 0).attr("x2", svgWidth - margin.left - margin.right).attr("stroke", "#aaa").attr("stroke-width", .4);; chart.select(".y-axis path").style("display", "none");

隐藏柱子后,展示只有坐标轴和辅助线的图,我们可以很清楚地看到变化:

优化后的效果图如下:

新增旋转标签

接着我们对图表做些“装饰”:每个柱子的底部文案怎么对齐呢?

我们可能会想到用 CSS 的定位做,但在这里 SVG 是不支持的,我们只能修改坐标值,根据文案的字符长度做偏移。同时这里要注意用 function 来获取当前的 this 上下文。通过 this.getBoundingClientRect().height 可以方便获取宽度。

 

js

复制代码

group.selectAll("text") .data(d => d.season) .enter() .append("text") .text((d, i) => { console.warn(d, i); return `${d.label}-${d.value}` }) .attr("x", d => columnWidth * (["Q1", "Q2", "Q3", "Q4"].indexOf(d.label) - 1) + 10) .attr("y", function (d) { const textHeight = this.getBoundingClientRect().height; // 获取文本高度 return chartHeight + textHeight; // 加上一些偏移量,使文本位于 X 轴上方 }) .attr('fill', '#000') .attr("transform", (d, i) => { // 使用 transform 属性旋转文本 const x = columnWidth * (["Q1", "Q2", "Q3", "Q4"].indexOf(d.label) - 1); const y = chartHeight; return `rotate(270 ${x} ${y})`; // 在元素的中心点处旋转90度 }).filter((d, i) => i === 0).attr('fill', '#fff')

效果如下:

最后,我们要再给图表加一些交互效果。

交互效果:实现 hover 展示每组的同季度柱子

示例代码如下:

 

js

复制代码

const rects = group // ... .on("mouseover", function (e) { const target = d3.select(e.target); const data = target.datum(); rects.filter((d) => d.label !== data.label).style("opacity", "0.2"); }) .on("mouseout", () => { rects.style("fill", (d, i) => colors[i]).style("opacity", "1"); });

这里我们只要监听鼠标移入和移除的事件,然后通过 DOM 获取 D3 的选择集,接着通过 datum 获取对应的关联的源数据,最后过滤当前移入的柱子,将其他的颜色设置透明。

为了过渡自然,我们还要处理设置每个柱子的过渡效果,添加 transition 属性:

 

html

复制代码

<style> rect { transition: all .2s linear; } </style>

最后调整后的效果:

交互效果:实现整组的 hover

示例代码如下:

 

js

复制代码

const groupItem = group .append("rect") .attr("x", (d) => columnWidth * ["Q1", "Q2", "Q3", "Q4"].indexOf(d.label)) .attr("y", 0) .attr("width", xScale.bandwidth()) .attr("height", (d) => chartHeight) .style("opacity", 0) .on("mouseover", function (e) { d3.select(this).style("fill", "blue").style("opacity", 0.05); }) .on("mouseout", function (e) { d3.select(this).style("fill", "blue").style("opacity", 0); });

看下这次实现后的效果:

交互效果:显隐 tooltip

在做 tooltip 的 hover 的时候,我们需要在 SVG 的可绘制区域中监听鼠标的移入和移出,但是直接在 SVG 是无法获取数据值的,我们需要在组和柱子做监听,就可以获得数据值和坐标位置。这里先做个事件封装,在内部我们通过 g 容器,然后在里面存入所有 SVG 元素。

注意,浮层的阴影我们可以用 CSS 的 filter: drop-shadow  文案的对齐我们使用 .attr("text-anchor", "end") 。

示例代码如下:

 

js

复制代码

/** * 监听浮层的位置 */ function onGroupLabel(e, d) { const mouseX = e.pageX; const mouseY = e.pageY; const labelOverlay = svg .append("g") .attr("class", "label-overlay") .attr("transform", `translate(${mouseX}, ${mouseY})`); labelOverlay .append("rect") .attr("x", 0) .attr("y", 0) .attr("rx", 5) .attr("ry", 5) .attr("width", 100) .attr("height", 120) .attr("fill", "#fff"); labelOverlay .append("text") .text(d.label) .attr("x", 10) .attr("y", 22) .attr("fill", "#aaa"); const seasons = labelOverlay .selectAll(".season") .data(d.season) .enter() .append("g") .attr("class", "season") .attr("transform", (d, i) => `translate(10, ${35 + i * 20})`); seasons .append("circle") .attr("cx", 5) .attr("cy", 5) .attr("r", 5) .style("fill", (d, i) => colors[i]); seasons .append("text") .text((d) => `${d.label}:`) .attr("x", 15) .attr("y", 9) .attr("fill", "black") .style("font-size", "12px"); seasons .append("text") .text((d) => `${d.value}`) .attr("x", 75) .attr("y", 9) .attr("text-anchor", "end") .attr("font-weight", "bold") .attr("fill", "black") .style("font-size", "12px"); svg.on("mousemove", function (e) { labelOverlay.attr("transform", `translate(${e.pageX}, ${e.pageY})`); }); } /** * 移除浮层的位置 */ function removeGroupLabel(e) { svg.selectAll(".label-overlay").remove(); svg.on("mousemove", null); }

在对应的 SVG 元素做监听:

 

js

复制代码

// 柱子 // ... .on("mouseover", function (e, d) { rects.filter((d1) => d1.label !== d.label).style("opacity", "0.2"); onGroupLabel(e, d3.select(this.parentNode).datum()); }) .on("mouseout", () => { rects.style("fill", (d, i) => colors[i]).style("opacity", "1"); removeGroupLabel(); }) // 分组 // ... .on("mouseover", function (e, d) { d3.select(this).style("fill", "blue").style("opacity", 0.05); onGroupLabel(e, d); }) .on("mouseout", function (e) { d3.select(this).style("fill", "blue").style("opacity", 0); removeGroupLabel(e); });

最终实现效果:

实现折线图

当我们有了柱状图的基础后,接下来我们再来实现折线图就简单很多了,这个时候我们能发现大量重复的代码,而绘制折线的核心代码只有一行:

 

js

复制代码

// 1. 要绘制的数据 // 2. 定义画布大小和边距 // 3. 创建SVG元素 // 4. 定义比例尺 // 5. 定义和添加X轴和Y轴 // 6. 绘制折线图数据 svg.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("d", d3.line().x(d => x(d.x)).y(d => y(d.y)));

效果如下:

实现动态排序折线图

该图表难点在于动画递进效果、hover 展示效果,接下来我们就来实现这个 ECharts 中相对复杂的动态排序折线图。

前置工作

首先定义我们的数据集,为了方便维护,我们不会在 list 中定义大量的数组对象,因为这样意味着大量重复无用的属性,我们只需要用数组下标定位 date、color、label 的值。

定义数据集:

 

js

复制代码

// 生成一些假数据 const data = { list: [ [ 5300, 6600, 6800, 6700, 6900, 7200, 7200, 7300, 7400, 8000, 7900, 8100, 8200, 10000, 10200, 10400, 10000, 9000, 11000, 10000, 10900, 12000, 12200, 12400, 12900, 13000, ], [ 5000, 6000, 6500, 6400, 5800, 9100, 15030, 15200, 15000, 17000, 18000, 16000, 15000, 15900, 17000, 18000, 16000, 12000, 17000, 16000, 15000, 14000, 13000, 12000, 12900, 19000, ], [ 5000, 6000, 6500, 6700, 6800, 10200, 15000, 15300, 15070, 17300, 18000, 17000, 17000, 17000, 22000, 22000, 21000, 24000, 25000, 23000, 22000, 22000, 25000, 25800, 28000, 40000, ], [ 6000, 6000, 6500, 6700, 6800, 10200, 15000, 15300, 15070, 17300, 18000, 17000, 17000, 17000, 22000, 22000, 21000, 24000, 25000, 33000, 33000, 22000, 25000, 55800, 58000, 60000, ], [ 6000, 6000, 6500, 6700, 6800, 10200, 15000, 15300, 15070, 17300, 18000, 17000, 17000, 17000, 55000, 55000, 51000, 54000, 55000, 53000, 52000, 22000, 45000, 45800, 50000, 56000, ], [ 6000, 6000, 6500, 6700, 6800, 10200, 15000, 15300, 15070, 17300, 18000, 17000, 17000, 17000, 22000, 44000, 41000, 44000, 45000, 43000, 42000, 33000, 35000, 35800, 38000, 40000, ], [ 5000, 6000, 6500, 6700, 6800, 10000, 25000, 25800, 25000, 37000, 38000, 37000, 47000, 47000, 48000, 59000, 59000, 59000, 67000, 66000, 65000, 64000, 73000, 72000, 72900, 73000, ], ], date: [ "1910", "1915", "1920", "1925", "1930", "1935", "1940", "1945", "1950", "1955", "1960", "1965", "1970", "1975", "1980", "1985", "1990", "1995", "2000", "2005", "2010", "2015", "2020", "2025", "2030", "2035", ], color: [ "#5470C6", "#91CC75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#9a60b4", ], label: ["Norwat", "France", "China", "Poland", "Russia", "Iceland", "US"], };

然后定义我们的绘制区域、坐标轴以及样式的优化:

 

js

复制代码

// 定义边距、宽高 const margin = { top: 50, right: 50, bottom: 50, left: 50 } const width = 1000 - margin.left - margin.right const height = 600 - margin.top - margin.bottom // 将日期字符串转化为日期对象 const parseDate = d3.timeParse('%Y') data.date = data.date.map(d => parseDate(d)) // 定义x轴比例尺 const x = d3.scaleTime() .range([0, width]) .domain(d3.extent(data.date)) // 定义y轴比例尺 const y = d3.scaleLinear() .range([height, 0]) .domain([0, d3.max(data.list.flat().map(d => d))]) // 在SVG中添加g元素并设置transform,来让g元素居中显示 const svg = d3.select('svg') .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) const g = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) // 添加x轴及其标签 g.append('g') .call(d3.axisBottom(x)) .attr("class", "x-axis") .style("color", '#aaa') .attr('transform', `translate(0,${height})`) // 添加y轴及其标签 g.append('g') .attr("class", "y-axis") .style("color", '#aaa') .call(d3.axisLeft(y).ticks(5)) g.selectAll(".y-axis .tick line").filter((d, i) => i > 0).attr("x2", width).attr("stroke", "#aaa").attr("stroke-width", .4); g.select(".y-axis path").style("display", "none");

接着我们需要绘制线段。

根据 data 生成path路径

在绘制每组时,我们 selectAll 就可以根据 data 传入的数组长度生成不同的分组,不用考虑数据的传入,这里的x(data.date[i])  y(d) 分别代表了折线图中的每个数据点的横坐标和纵坐标。

由于 x 轴的比例尺定义了时间轴上的位置,所以根据每个数据点对应的时间,可以通过 x 比例尺来确定其横坐标。而 y 轴的比例尺定义了数据值的范围,所以根据每个数据点的数值,可以通过 y 比例尺来确定其纵坐标。

代码如下:

 

js

复制代码

// 定义生成折线的函数 const lineGenerator = d3.line() .x((d, i) => x(data.date[i])) .y(d => y(d)) .defined(d => d !== null) // 防止缺少数据导致折线断裂 const group = g.selectAll('.group').data(data.list).enter().append('g').attr("class", "group") const lines = group.append('path') .datum(d => d) .attr('class', 'line') .attr('d', lineGenerator) .attr('stroke', (d, i) => data.color[i]) .attr('stroke-width', '2') .attr('fill', 'none')

效果如下:

接着我们开始绘制折线图的动态效果:

 

js

复制代码

// 绑定过渡方法和动画效果 lines.attr('stroke-dasharray', function () { return `${this.getTotalLength()} ${this.getTotalLength()}` }) .attr('stroke-dashoffset', function () { return this.getTotalLength() }) .transition() .ease(d3.easeLinear) // 过渡效果 .delay(500) .duration(1000) .attr('stroke-dashoffset', 0)

stroke-dasharray 和 stroke-dashoffset 是 SVG 中用来定义路径线段样式的两个属性。

  • stroke-dasharray 属性定义了对虚线的描述。例如,如果设置 stroke-dasharray: 5 5,则表示在路径中每 5 个像素绘制一个实线,然后 5 个像素留空,然后再 5 个像素绘制一个实线……如此反复。

  • stroke-dashoffset 属性定义了虚线的起始位置,也就是虚线距离路径起始点的偏移量。例如,如果设置 stroke-dashoffset: 5,则表示路径虚线的起始点向路径起始点相对偏移 5 个像素。

在上面的代码中,首先通过获取 getTotalLength() 方法获取路径总长度,然后将 stroke-dasharray 属性设为该长度值的两倍,因此实现了完全隐藏路径线段的效果。接下来通过设置 stroke-dashoffset 的初始值为总长度值,实现了路径从一开始完全隐藏的效果。最后通过过渡效果和延迟设置,使得路径从隐藏状态逐渐展示出来,从而实现了路径动画效果。

效果如下:

最后,我们完善交互细节。

交互效果:文字跟随路径动画

首先创建了一个 textPath 元素,并将其添加到每个组中的 text 元素中。我们使用 xlink:href 属性将 textPath 元素与相应的折线路径进行关联,并使用 startOffset 属性设置文字的起始位置在线的端头右侧。然后,我们在动画过渡中,通过修改 startOffset 属性的值,将文字从线的端头右侧移动到线的起始位置,实现文字的展示效果。

代码如下:

 

js

复制代码

// ... const textPaths = group .append("text") .append("textPath") .attr("xlink:href", (d, i) => `#line-path-${i}`) .attr("startOffset", "100%") .attr("text-anchor", "end") .attr("fill", (d, i) => data.color[i]) .text((d, i) => data.label[i]); // 绑定过渡方法和动画效果 lines .attr("stroke-dasharray", function () { return `${this.getTotalLength()} ${this.getTotalLength()}`; }) .attr("stroke-dashoffset", function () { return this.getTotalLength(); }) .transition() .ease(d3.easeLinear) // 过渡效果 .delay(0) .duration(6000) .attr("stroke-dashoffset", 0); textPaths .attr("startOffset", "0%") .attr("text-anchor", "end") .transition() .ease(d3.easeLinear) .delay(0) .duration(6000) .attr("startOffset", "100%");

效果如下:

交互效果:插值计算文案位置

上文的文字跟随路径动画方法明显的缺陷就是文案是垂直于折线的,很显然不满足我们的需求,要想让文案在线端头的右侧移动,其实我们只要得到每个线的端头的 y 坐标即可。

我们获取 lines,并 each 遍历每个元素,筛选对应的 text,接着获取 dom 节点,通过 getTotalLength 能得到路径的长度。然后生成 interpolator, 用于创建一个在 0 和路径长度之间进行插值函数,用于动态计算路径上不同点的位置,从而实现路径绘制的动画效果。

实现思路我们有了,接下来我们只要监听line的tween方法的end事件,也就是能得到当前绘制的线的位置,位置范围是 0 到 1,而得到的 t 代表动画的进度,我们知道 interpolator 又是一个插值函数,那么对应能得到实际的长度了,然后通过 svg 的 getPointAtLength 就能获取对应的 point 坐标了。接下来修改下 text 节点的位置即可。

代码如下:

 

js

复制代码

const texts = d3.selectAll(".a-txt"); // 选择所有文本元素 lines.each(function (d, i) { const line = d3.select(this); // 当前折线元素 const text = texts.filter(function (_, j) { return j === i; // 根据索引筛选对应的文本元素 }); const pathEl = line.node(); //获取dom节点 const pathLength = pathEl.getTotalLength(); const interpolator = d3.interpolate(0, pathLength); line .attr("stroke-dasharray", `${pathLength} ${pathLength}`) .attr("stroke-dashoffset", pathLength) .transition() .ease(d3.easeLinear) .delay(0) .duration(6000) .attr("stroke-dashoffset", 0) .tween("end", function () { return function (t) { const length = interpolator(t); const point = pathEl.getPointAtLength(length); const x = point.x; const y = point.y; text .text(data.label[i]) .attr("x", x + 10) .attr("y", y); // 将位置应用到对应的文本元素 }; }); });

实现效果如下:

交互效果:辅助线、鼠标定位线的每个点并展示 Tooltip

我们在 SVG 监听鼠标移动的事件后,根据 mouseX 就可以得到索引的位置,通过这个索引我们可以获取到 data 里的任一数据,接着我们就可以绘制辅助线和浮层,而浮层的具体实现跟折线图类似,我们稍作修改即可。

绘制辅助线和浮层

代码如下:

 

javascript

复制代码

svg .on("mousemove", function (event) { const mouseX = d3.pointer(event)[0]; const mouseY = d3.pointer(event)[1]; const year = new Date(x.invert(mouseX - margin.left)).getFullYear(); // 更新辅助虚线的位置和显示状态 if (year >= 1997 && year <= 2022) { // 获取索引位置 let id = data.date.findIndex((item) => { return new Date(item).getFullYear() === year; }); helperLine .attr("x1", x(data.date[id])) .attr("y1", 0) .attr("x2", x(data.date[id])) .attr("y2", height) .style("opacity", 1); // 更新浮层位置 labelOverlay.attr( "transform", `translate(${mouseX > width - 150 ? width - 150 : mouseX + 10}, ${ mouseY > height - 180 ? height - 180 : mouseY + 10 })` ); d3.select(".label-rect").style("display", "block"); d3.select(".over-year").text(year); // 绘制label,和之前的折线图的label相似 initLabel(id); } })

绘制垂直辅助线 helperLine,我们只要 selectAll 和 join 创建元素后,由于是 group,我们在 data 的 d 中获取到的是 list 的某一项,这个时候传入索引我们就得到 y 轴的值。我们知道通过 y 轴比例尺和 y 轴的数据值,就可以通过 D3 的比例尺方法得到 y 轴的坐标值,而 mouseX 我们是知道的,所以接着我们就可以绘制相交点的圆形了。

绘制相交点圆形
 

javascript

复制代码

const cs = group .selectAll(".circle") .data((d) => { return [d[id]]; }) .join("circle") .attr("class", "circle") .attr("cx", (d, i) => x(data.date[id])) .attr("cy", (d, i) => y(d)) .attr("r", 5); let i = -1; cs.each(function () { const dom = d3.select(this); i++; dom.attr("fill", data.color[i]); });

事件的优化

我们要注意这些 hover 的元素,在鼠标超出绘图区域,要通过 mouseout 移除浮层,但是在 svg 内部鼠标一旦移动到线段或文字等,也会触发 mouseout 就会误删。我们可以根据 class 类名做区分,但是后续新增 svg 节点后是很难维护的,所以是否移除辅助线、相交圆点、tooltip,我们通过鼠标是否超出绘图区域判断

在进入 mousenter 的时候我们需要创建 svg 元素,在 mousemove 的时候我们要做更新节点的操作,在鼠标超出绘图区域的时候移除 hover 元素。

具体代码如下:

 

js

复制代码

.on("mouseenter", (e) => { // 创建浮层元素 labelOverlay = svg.append("g").attr("class", "label-overlay"); // 绘制元素 labelOverlay .append("rect") .attr("class", "label-rect") .attr("x", 0) .attr("y", 0) .attr("rx", 5) .attr("ry", 5) .attr("width", 150) .attr("height", 180) .style("display", "none") .attr("fill", "#fff"); labelOverlay .append("text") .attr("class", "over-year") .attr("x", 10) .attr("y", 22) .attr("fill", "#aaa"); }) .on("mouseout", function (e) { const mouseX = e.pageX; const mouseY = e.pageY; const chartX = svg.node().getBoundingClientRect().x; const chartY = svg.node().getBoundingClientRect().y; const chartWidth = svg.node().getBoundingClientRect().width; const chartHeight = svg.node().getBoundingClientRect().height; if ( mouseX < chartX || mouseX > chartX + chartWidth || mouseY < chartY || mouseY > chartY + chartHeight ) { svg.selectAll(".label-overlay").remove(); } });

效果如下:

总结

最后,我们总结下这一节的关键知识点。

  1. 为什么要用 D3: D3 基于 SVG 的数据驱动视图的库,通过链式调用、封装比例尺、数学方法、数据状态的管理等,我们可以轻松绘制复杂的图表。

  2. 如何理解数据驱动视图: 我们的关注点只在数据,不用深入数据背后的调用,修改数据意味着视图会被更新。

  3. 如何实现柱状图: 定义绘图区域 -> scaleBand 用于离散数据,用在 x 轴的比例尺;在 y 轴我们用scaleLinear,生成比例尺 -> 生成坐标轴 -> 通过 rect 生成柱体。

  4. 实现多层级旋转标签柱状图的难点: 多层级我们要考虑好数据结构,也就是数组嵌套数组,在交互难点部分,通过在内部元素的 hover,传入 d、e,我们能创建 label,实际操作中我们很有可能遇到其他元素导致 mouseout,我们可以通过dom.style("pointer-events", "none") 或者监听元素位置判断是否选中来解决 label 的误删。是否高亮的实现我们只要在对应的元素监听事件即可。

  5. 如何实现折线图: 定义绘图区域 -> scaleTime 用于时间数据,用在 x 轴的比例尺;在 y 轴我们用 scaleLinear,生成比例尺 -> 生成坐标轴 -> 通过 path 生成折线。

  6. 实现动态排序折线图的难点:

    • 线的动画实现:我们通过 stroke-dasharray 来定义实线和虚线的长度,通过修改 stroke-dashoffset 来实现移动,同时应用 transition 过渡即可;
    • 实现文字跟随动画:我们只要监听 SVG 的 mouseX,通过插值转换器 interpolator,传入 tween 方法的 end 事件中回调的 t 得到对应的进度值,我们就可以得到实际线段的长度,最后通过 svg 的 getPointAtLength 方法就可以得到 point 坐标,更新 text 的 x 和 y 的属性即可。

下一节我们将继续实现高级图表——雷达图和饼图。文章来源地址https://www.toymoban.com/news/detail-848168.html

到了这里,关于前端可视化入门与实战:D3 高级图表实战:柱状图、折线图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Python入门系列】第十五篇:Python数据可视化和图表绘制

    数据可视化是数据分析和数据科学中非常重要的一部分。通过可视化,我们可以更好地理解数据、发现数据之间的关系、展示数据的趋势和模式,并向他人传达我们的发现。 Python是一种功能强大的编程语言,拥有许多用于数据可视化的库和工具。其中,Matplotlib是最常用的绘

    2024年02月13日
    浏览(62)
  • [小尘送书-第二期]《Power BI数据分析与可视化实战》数据清洗、数据建模、数据可视化设计与高级技法

    大家好,我是小尘,欢迎你的关注!大家可以一起交流学习!欢迎大家在CSDN后台私信我!一起讨论学习,讨论如何找到满意的工作! 👨‍💻博主主页:小尘要自信 👨‍💻推荐专栏: 👨‍💻《1》开发环境配置攻略 👨‍💻《2》Java程序员的成长 👨‍💻《3》2023Java面试实

    2024年02月13日
    浏览(41)
  • 尚硅谷Docker实战教程-笔记13【高级篇,Docker轻量级可视化工具Portainer】

    尚硅谷大数据技术-教程-学习路线-笔记汇总表【课程资料下载】 视频地址:尚硅谷Docker实战教程(docker教程天花板)_哔哩哔哩_bilibili 尚硅谷Docker实战教程-笔记01【基础篇,Docker理念简介、官网介绍、平台入门图解、平台架构图解】 尚硅谷Docker实战教程-笔记02【基础篇,Do

    2024年02月15日
    浏览(52)
  • 可视化爬虫框架spiderflow入门及实战

    官网: 点击直达官网 文档: 点击查看官网文档 说明: 目前官网和文档均无法正常访问,原因未知,参考本文即可。再有问题欢迎留言讨论。 以下内容部分来自官网或官网文档。文章比较长,请准备好瓜子和小板凳~~~ TIP: 文中用到的网站地址仅为了说明功能,如有侵犯,请告

    2024年02月04日
    浏览(33)
  • 小程序数据可视化:使用图表和可视化工具展示数据

    在当今信息爆炸的时代,数据无疑是最珍贵的资源之一。然而,海量的数据如果不加以整理和展示,很难从中获取有价值的信息。这时候,数据可视化就发挥了重要作用,它能够通过图表和可视化工具将复杂的数据转化为直观的视觉形式,帮助人们更好地理解和分析数据。本

    2024年02月11日
    浏览(58)
  • 数据可视化:图表绘制详解

    数据可视化是一种将抽象的数字和数据转化为直观图形的技术,使数据的模式、趋势和关系一目了然。本文将详细介绍如何绘制各种类型的图表,包括柱状图、折线图、饼图、散点图和热力图等。 第一部分:图表类型和选择 1. 柱状图 柱状图是用于比较类别数据的常见图表。

    2024年02月12日
    浏览(70)
  • Excel 动态可视化图表分享

    AIGC ChatGPT 职场案例 AI 绘画 与 短视频制作 PowerBI 商业智能 68集 数据库Mysql 8.0  54集 数据库Oracle 21C 142集 Office 2021实战应用 Python 数据分析实战, ETL Informatica 数据仓库案例实战 Excel 2021实操 100集, Excel 2021函数大全 80集 Excel 2021高级图表应用89集, Excel 2021大屏可视化制作 56集

    2024年01月18日
    浏览(304)
  • 数据可视化——使用echars图表展示

    目录 1、前言 2、解决方案 2.1、echars(前端等组件库) 2.2、PPT等其他软件工具 2.3、使用flourish等在线数据可视化制作平台 2.4、自己用代码实现 有一个小作业,需要自己收集一组数据,然后进行数据可视化,并且对数据进行分析 对此,有多种解决方案,纠结一会后,最终我选

    2024年02月07日
    浏览(60)
  • ECharts数据可视化--常用图表类型

    目录 一.柱状图 1.基本柱状图  1.1最简单的柱状图 ​编辑   1.2多系列柱状图   1.3柱状图的样式          (1)柱条样式                  (2)柱条的宽度和高度         (3)柱条间距         (4)为柱条添加背景颜色 ​编辑 2.堆叠柱状图 3.动态排序柱状图 4.阶梯

    2024年02月05日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包