图形化开发（四）03-D3.js之实践——svg中添加坐标轴 & demo-让坐标轴滑动起来

最新推荐文章于 2024-04-15 21:39:33 发布

viceen

最新推荐文章于 2024-04-15 21:39:33 发布

阅读量856

点赞数

分类专栏：可视化文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_44867717/article/details/120407531

版权

可视化专栏收录该内容

130 篇文章 77 订阅

订阅专栏

图形化开发（四）03-D3.js之实践——svg中添加坐标轴 & demo-让坐标轴滑动起来

坐标轴

坐标轴，是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的，需要用其他的元素组合构成。D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。

在这里插入图片描述

在 SVG 画布的预定义元素里，有六种基本图形：

矩形
圆形
椭圆
线段
折线
多边形

另外，还有一种比较特殊，也是功能最强的元素：

路径

画布中的所有图形，都是由以上七种元素组成。

显然，这里面没有坐标轴 这种元素。如果有的话，我们可以采用类似以下的方式定义：

<axis x1="" x2="" ...></axis>

很可惜，没有这种元素。但是，这种设计是合理的：不可能为每一种图形都配备一个单独的元素，那样 SVG 就会过于庞大。

因此，我们需要用其他元素来组合成坐标轴，最终使其变为类似以下的形式：

<g>
<!-- 第一个刻度 -->
<g>
<line></line>   <!-- 第一个刻度的直线 -->
<text></text>   <!-- 第一个刻度的文字 -->
</g>
<!-- 第二个刻度 -->
<g>
<line></line>   <!-- 第二个刻度的直线 -->
<text></text>   <!-- 第二个刻度的文字 -->
</g> 
...
<!-- 坐标轴的轴线 -->
<path></path>
</g>

分组元素，是 SVG 画布中的元素，意思是 group。此元素是将其他元素进行组合的容器，在这里是用于将坐标轴的其他元素分组存放。

如果需要手动添加这些元素就太麻烦了，为此，D3 提供了一个组件：d3.svg.axis()。它为我们完成了以上工作。

定义坐标轴

上一章提到了比例尺的概念，要生成坐标轴，需要用到比例尺，它们二者经常是一起使用的。下面，在上一章的数据和比例尺的基础上，添加一个坐标轴的组件。

var dataset = [1, 2, 3, 4, 5];  // 数据源  x

// 比例尺  让图表更加的直观， 合理

var min = d3.min(dataset);
var max = d3.max(dataset);

// console.log(max)

// scaleLinear可以定义比例尺  domain range
var linear = d3.scaleLinear().domain([0, max]).range([0, 300]);

// 添加坐标轴
var xAxis = d3.axisBottom(linear);

在svg中添加坐标轴

定义了坐标轴之后，只需要在 SVG 中添加一个分组元素，再将坐标轴的其他元素添加到这个里即可。代码如下：

svg.append("g")
   .attr("transform","translate(20,130)")
   .call(axis);

让你的坐标轴动起来demo

效果-坐标轴可左右滑动

在这里插入图片描述

代码

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #update {
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
</head>

<body>
    <button id="update">更新</button>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script>

        // 1. 添加画布
        var width = 960;
        var height = 500;

        var svg = d3.select('body').append('svg').attr('width', width).attr('height', height)

        // 完成 静态的  坐标轴
        // 线性比例尺
        var scale = d3.scaleLinear().domain([0, 100]).range([100, 860]);

        var axis = d3.axisBottom(scale);

        
        var g = svg.append('g').attr('id', 'g').call(axis);

        // 绑定事件
        d3.select('#update').on('click', function() {
            // 更新数据
            scale.domain([0, Math.random() * 100]);
            // g.call(axis);
            // transition d3提供默认的动画
            d3.select('#g').transition().call(axis)
        })

    </script>
</body>

</html>

viceen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图形化开发（四）03-D3.js之实践——svg中添加坐标轴 & demo-让坐标轴滑动起来

图形化开发（四）03-D3.js之实践——svg中添加坐标轴 & demo-让坐标轴滑动起来坐标轴坐标轴，是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。坐标轴在 SVG 中是没有现成的图形元素的，需要用其他的元素组合构成。D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。在 SVG 画布的预定义元素里，有六种基本图形：矩形圆形椭圆线段折线多边形另外，还有一种比较特殊，也是功能最强的元素：路径画布中的所有图形，都是由
复制链接

扫一扫