前端数据可视化D3 ——（案例1）柱状图

从本篇博客开始，我将使用D3来完成一些基础的demo，关于数据可视化方面的介绍我就不多说了，关于d3的简单介绍：

D3 的全称是（Data-Driven Documents），一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，主要是用来做数据可视化，将强大的可视化组件应用于需求中。

查看这个系列的代码前，请先熟悉一些d3基础知识，关于基础可移步至官网：

https://d3js.org/

首先我们先来看看，要实现的柱状图的效果：

简单分析一下：

1.首先我们需要一张画布。

2.柱体由长方形构成，并且高度由数据驱动显示。

3.由于柱体的宽度和高度刚好近似铺满整个画布，所以需要用到比例尺

4.柱体上有对应数据显示，大于30的文字被标红。

下面来看一些重要的代码块：

    //线性比例尺const linear = d3.scaleLinear().domain([0, d3.max(datalist)]).range([2, 398])//序数比例尺const scaleBand = d3.scaleBand().domain(d3.range(0,datalist.length)).range([10, 490]).paddingInner(0.08);

上面是两个比例尺，线性比例尺被用于柱体的高度相关，而序数比例尺被用于柱体的宽度相关。

（画布的宽度是500，高度是400）

    container.selectAll('rect').data(datalist).enter().append('rect').classed('bar', true).style('height', function (d, i) {return linear(d) - 20 + 'px';}).attr('x', function (d, i) {return scaleBand(i) }).attr('width', function (d, i) {return scaleBand.bandwidth() + 'px'}).attr('y', function (d, i) {return 400 - linear(d) + 10;});

上面是添加柱体的代码，用到了enter，表示有多少数据添加多少rect。另外柱体的高度、宽度、x轴、y轴坐标都动态生成。

    container.selectAll('text').data(datalist).enter().append('text').attr('text-anchor', 'middle').text(function (d) {return d;}).attr('x', function (d, i) {return scaleBand(i) + scaleBand.bandwidth()/2 ;}).attr('y', function (d, i) {return 400 - linear(d) + 30;}).style('fill', function (d) {if (d > 30) {return 'red'}})

上面是添加数据文字的代码块，再次用到enter，其中文字颜色fill属性也由函数动态生成，大于30的部分是红色。

最后附上完整代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://d3js.org/d3.v5.min.js"></script><style>#app {width: 500px;height: 400px;background: #efefef;position: relative;}.bar {/* width: 50px; */fill: green;position: absolute;bottom: 100px;}.bar span {display: block;text-align: center;}</style>
</head><body><svg id="app"></svg><script>var datalist = [10, 20, 30, 40, 50,60,70,80,90]//线性比例尺const linear = d3.scaleLinear().domain([0, d3.max(datalist)]).range([2, 398])//序数比例尺const scaleBand = d3.scaleBand().domain(d3.range(0,datalist.length)).range([10, 490]).paddingInner(0.08);var container = d3.select("#app");container.selectAll('rect').data(datalist).enter().append('rect').classed('bar', true).style('height', function (d, i) {return linear(d) - 20 + 'px';}).attr('x', function (d, i) {return scaleBand(i) }).attr('width', function (d, i) {return scaleBand.bandwidth() + 'px'}).attr('y', function (d, i) {return 400 - linear(d) + 10;});container.selectAll('text').data(datalist).enter().append('text').attr('text-anchor', 'middle').text(function (d) {return d;}).attr('x', function (d, i) {return scaleBand(i) + scaleBand.bandwidth()/2 ;}).attr('y', function (d, i) {return 400 - linear(d) + 30;}).style('fill', function (d) {if (d > 30) {return 'red'}})</script></body></html>

有任何问题欢迎评论或者私信提出~看到后我都会回复

前端数据可视化D3 ——（案例1）柱状图相关推荐

前端数据可视化可绘制地图等插件:Highcharts、Echarts和D3
前端数据可视化插件有很多,但我用过的只有Highcharts(https://www.hcharts.cn/).Echarts(http://echarts.baidu.com/)和D3(https: ...
echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
用最科学的方法展示最形象的图表——前端数据可视化实践
前言也许很多人都会觉得奇怪,在这样一个更多以后台数据分析为主的公司,为什么需要一个专注于前端的团队?今天这篇文章就来讲述那些年我们错过的前端数据可视化,以此来解答这个问题. 需求那么,在我们的项目 ...
Py之Seaborn：数据可视化Seaborn库的柱状图、箱线图(置信区间图)、散点图/折线图、核密度图/等高线图、盒形图/小提琴图/LV多框图的组合图/矩阵图实现
Py之Seaborn:数据可视化Seaborn库的柱状图.箱线图(置信区间图).散点图/折线图.核密度图/等高线图.盒形图/小提琴图/LV多框图的组合图/矩阵图实现目录
数据可视化分析案例：探索BRFSS电话调查数据
原文链接:http://tecdat.cn/?p=9284 加载包 library(tidyr) library(knitr) opts_chunk$set(echo = TRUE, fig.alig ...
FlyFish｜前端数据可视化开发避坑指南（二）
FlyFish是云智慧开源的一款数据可视化编排平台.通过配置数据模型为用户提供上百种可视化图形组件,零编码即可实现符合自己业务需求的炫酷可视化大屏. 同时,FlyFish也提供了灵活的拓展能力,支持组 ...
基于Matplotlib和Seaborn以及Numpy的数据可视化基础案例练习一（含数据集）
数据可视化基础案例练习一概述使用到的Python库使用到的数据集案例 1. 绘制 2000-2017 年各季度的国民生产总值散点图 2. 绘制 2000-2017 年第一产业.第二产业.第三产 ...
d3 svg path添加文本_数据可视化——D3展现数据最炫丽的一面
热情的或--有温度的"1" 大家好,大家肯定很好奇,数据能是什么样子嘛,不就是干巴巴的1.2.3-!哟,这个火热的"1"好像是挺绚丽的啊,但对不起,这只是数字, ...
大数据可视化案例分析_Tableau数据可视化分析案例
0x00 Tableau简介 Tableau是一款定位于数据可视化敏捷开发和实现的商务智能展现工具,可用来实现交互的.可视化的分析和仪表盘应用. Tableau提供了体验感良好且易用的使用界面,在处理 ...
前端数据可视化ECharts使用指南——制作时间序列数据的可视化曲线
我为什么选择ECharts ? 1.容易使用,好上手,官网文档优雅清晰,案例简明美观,学习时间短. 2.开源免费,压根不要什么成本,适合我这种穷屌啊.所以,在比较了MetricGraphics.js后 ...

前端数据可视化D3 ——（案例1）柱状图

前端数据可视化D3 ——（案例1）柱状图相关推荐

最新文章

热门文章