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
注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值