D3 数据可视化006——坐标轴 Axis

D3中的SVG坐标轴绘制与方向控制

最新推荐文章于 2025-03-17 19:32:19 发布

原创

最新推荐文章于 2025-03-17 19:32:19 发布 · 1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#信息可视化 #数据分析 #数据挖掘

本文详细介绍了如何在D3中使用SVG元素创建和定制四种朝向的坐标轴（顶部、底部、左侧和右侧），包括设置SVG属性、创建坐标轴实例、指定刻度和调整位置，以实现可视化图表中的轴线绘制。

在D3中，坐标轴是在svg中绘制的，对于svg常见的属性和标签要有基本了解。D3中提供了四个朝向的坐标轴，如下图：

下面跟着我一起学习D3中坐标绘制的过程

1、创建一个Svg元素，用来包裹其它图像元素

let height = 300, 
    width = 300, 
    margin = 30, 
    offset = 40,
    axisWidth = width - 2 * margin,
    svg;

声明Svg的宽高
避免绘图在边缘的不可见性，设定间距和偏移
宽度或者高度减去两边的间距就是坐标轴的长度
最后创建Svg并添加宽高等属性

const createSvg = (container) => { // 后面调用时传入容器参数
    svg = d3.select(container).append('svg')
            .attr('width', width)
            .attr('height', height)
}






HTML和CSS
<template>
    <div id="d3Container" class="container">
        <div class="axisTopBox axisBox" style="background-color: rgb(166 206 227)"></div>
        <div class="axisBottomBo