D3.js 绘制立体柱状图

绘制效果图如下：

绘制思路：

将立体柱状图拆分为顶部与侧面，并分别用 path 路径绘制。

拆分后的顶部和侧边的绘制顺序如图所示：

 // 基础配置const svgObj = {  // svg画布大小width: 300,height:300}const width = 20;const height = 60;            // 柱体高度const lineColor = '#1ea0d8';  // 线条颜色const fillColor = '#2f71b5';  // 填充颜色

绘制路径d中的width理应通过计算得知，为了方便表示此处底部与顶部端点间的垂直及水平距离均使用width表示。

 // 绘制const svg = d3.select(node).append('svg').attr({width: svgObj.width,height: svgObj.height,});// 绘制顶面svg.append('path').attr('d', `M100 ${100 - height} l${width} ${-width} l ${-width} ${-width} l ${-width} ${width} z`).attr({fill: fillColor,stroke: lineColor,'stroke-width': 1,'shape-rendering': 'crispedges',});// 绘制侧面svg.append('path').attr('d', `M100 100 l 0 ${-height} l ${width} ${-width} l 0 ${height} l ${-width} ${width} l ${-width} ${-width} l 0 ${-height} l ${width} ${width} z`).attr({fill: fillColor,stroke: lineColor,'stroke-width': 1,'shape-rendering': 'crispedges',});

绘制路径命令：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

D3.js 绘制立体柱状图相关推荐

D3.js绘制颜色:RGB、HSL和插值 (V3版本)
转载地址:D3.js绘制颜色:RGB.HSL和插值 (V3版本) 如果要计算介于两个颜色之间的颜色,需要用到插值(Interpolation).D3提供了d3.intrerpolateRgb()来处 ...
d3js mysql_使用D3.js绘制地图并打点
本篇简单介绍一下使用D3.js绘制地图,并更具经纬度在地图打点.最后根据点生成voronoi图及其三角网. 下载地图geoJson文件去网上下载要绘制地图的geoJson文件. 使用d3.json( ...
D3.js绘制树形图
1.什么是D3: data-driven-document,翻译为数据驱动的文档,是一种由数据来决定绘图流程的程序设计模型.简单说,D3是一个JavaScript的函数库,用来做数据可视化(将数据的各 ...
使用D3.js绘制重庆地图
重庆市地图json数据下载链接https://pan.baidu.com/s/19eZfuGGRY6JOrH9WnZJ5iw 密码h5f9 D3.js下载链接:https://pan.baidu.co ...
D3.js 绘制柱状图
使用D3 V4版本绘制使用D3绘制柱状图,绘制效果如下: 使用D3绘制柱状图,先对需要绘制的图形拆解,主要分为以下几个部分: 1. 比例尺的定义 2. 坐标轴的绘制 3. 添加矩形 4. 修改坐标轴 ...
d3.js——多柱体柱状图（v5）
一.页面引用 <!doctype html> <html lang="en"> <head><meta charset="UTF ...
d3.js 绘制极坐标图(polar plot)
0.引言在极坐标系中,任意位置可由一个夹角和一段相对原点(极点)的距离表示.也就是说,我们可以用 (angle,r) 来表示极坐标系中的点. 1.数据假设我们有如下数据集[ [10, 0.2], ...
ECharts: 绘制立体柱状图【圆柱体】
绘制这个立体的圆柱体柱状图主要由三块组成: 底部主体顶部实现这种效果主要是: ECharts中的 series 属性,通过两种不同类型的图表组合而成. 其中里面的柱体渐变色是通过 ECharts ...
D3.js 绘制散点图
一.实现效果二.代码 1.创建svg var svg = d3.select('#mychart').append('svg').attr('width', width + margin.left ...

D3.js 绘制立体柱状图

绘制思路：

D3.js 绘制立体柱状图相关推荐

最新文章

热门文章