D3.js 绘制立体柱状图

最新推荐文章于 2024-08-27 12:00:00 发布

RongJoy

最新推荐文章于 2024-08-27 12:00:00 发布

阅读量4.2k

点赞数

分类专栏： D3 文章标签： D3.js

本文链接：https://blog.csdn.net/You_Ta/article/details/87626744

版权

D3 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

绘制效果图如下：
在这里插入图片描述

绘制思路：

将立体柱状图拆分为顶部与侧面，并分别用 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
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。