D3.js 柱状图的拖拽动画效果

最新推荐文章于 2025-02-12 13:51:25 发布

Simon_c_c_r

最新推荐文章于 2025-02-12 13:51:25 发布

阅读量428

点赞数 1

文章标签： javascript 开发语言数据可视化

本文链接：https://blog.csdn.net/Simon_c_c_r/article/details/132271410

版权

本文讲述了如何使用D3.js实现柱状图的拖拽动画效果，以替代数据翻页按钮。通过调整d3.drag()函数，结合柱状图的动画平滑过渡，实现了在拖拽操作中保持视觉连贯性的动画。同时，分享了一个满足平移动画效果的实现方法，并提及了一个用于在线时序级嵌入式仿真的平台。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

起因：

不久之前遇到了一个朋友、叫吴钟深，他说他刚刚入门数据可视化，本来在纠结是使用大家都在用的Echarts还是学一个更加自由灵活的可视化库，后来还是学了D3.js。在观摩学习了各个大佬的教学之后初步掌握了D3的基本api的使用，但是他说他们项目经理最近想要把图表的翻页按钮给干掉，他不知道用那种方法代替翻页按钮。我作为一个练习时长两个半月的前端数据可视化菜鸟当场就表示直接使用D3的拖拽不就好了吗。

//drag
var startX = undefined;
function dragstarted(event, d) {
  startX = event.x
}
function dragged(event, d) {
  var glx = startX - event.x
  if (glx >= 70) {
    console.log(1)
    startX = event.x; 
  }
  if (glx <= -70) {
    console.log(2)
    startX = event.x; 
  }
}
function dragended() {
  startX = undefined;
}

我给他说你就用d3.drag()把这3个function挂在你的svg上面测试一下，自己把console.log给换成刷新图表翻页就行了。如果是纵向的图表就把event.x换成event.y，其他参数稍微改改名字就行了。他一听豁然开朗，说这就回去试试。

几天后。。。

过了几天我又看到他了，连忙问问他的项目怎么样了，他一脸愁容的给我说拖拽确实可以把翻页按钮干掉。不过拖拽的操作和自己以前写的动画不是很匹配。我让他打开电脑给我康康。他的柱状图的翻页效果是每个rect的高进行一个平滑过渡动画。之前有翻页按钮确实没什么问题，但现在确实不匹配拖拽的操作。我说其实也简单，直接把动画的duration改成0，然后图表改成一条一条刷新而不是整页数据刷新就行了。调整一下拖拽判定的距离、看起来是整个图表被拖过来。

他说那不就和直接把图表remove再重新生成一个一样了吗。我想了想，确实。但也不影响。他说他们项目经理还是想要一个动画效果，刚刚这个肯定是过不了的。
我没办法，只好登录我的代码仓库把我之前在公司摸鱼随便写的代码下下来。

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

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./style.css">
    </head>

    <body>
        <!-- <script src="../../d3.min.js"></script> -->
        <script src="https://d3js.org/d3.v6.min.js"></script>
        <div id="

最低0.47元/天解锁文章