d3
文章平均质量分 62
silent_missile
这个作者很懒,什么都没留下…
展开
-
在vue3+typescript中使用d3 version 7注意的地方
typescript是一个类型严格的语言,在vue3+typescript项目中调用d3时,最好也遵循这一要求,除非万不得已,尽量不要使用any类型。首先,最好是在vue3的单文件组件的template中直接定义好DOM树,尤其是svg的树。市面上很多代码非常乐于利用ts/js在代码中生成DOM树节点,这也是前端进入框架时代以后的绝大多数风格。这样不是说不行,但是代码运行效率会低一些,尤其是在使用d3的时候会比较敏感。原创 2024-05-14 11:59:19 · 959 阅读 · 0 评论 -
d3.js学习笔记vue2(1)symbol容易忽略的要点
因为自己想要写点东西,所以学习了d3现在前端已经不再是jQuery的时代了,所以切换到了vue + vue-router + vuex全家桶d3有很多教程,这里记录的主要是其他教程没有的东西,也是我在实践中踩过的坑,记录下来就不怕忘了这是一个用d3在vue中绘制一个曲线图,然后通过拖拽曲线图上的标记点,改变曲线的形状,所以需要用到symbol从d3的v5版本起,d3内部各个模块被拆...原创 2018-12-05 16:29:13 · 893 阅读 · 1 评论 -
d3.js学习笔记vue2(2)使用比例尺和坐标轴绘制网格线
参考https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f实现了网格线他的思路是把d3中坐标轴的标记线延长到覆盖整个绘图区域,也就是修改ticks(),我觉得这样很巧妙在我读过的各篇文章里,关于d3坐标轴的ticks()大都语焉不详首先坐标轴要对应一个比例尺d3.scale(),比例尺包含了domain()和r...原创 2018-12-05 16:45:11 · 4153 阅读 · 1 评论 -
d3.js学习笔记vue2(3)使用zoom进行缩放和平移
zoom从字面上看是缩放的意思,但是d3中的zoom除了能缩放,还能平移,因为这两个操作总是不分家的首先,整个显示区域中并不是所有的元素都要缩放和平移的,比如坐标轴、背景,这些都是不需要缩放和平移的,所以在设定zoom元素时,需要将其排除。最好的办法是使用svg的g标签对图形元素进行分组,把需要缩放的放在一个g标签里,其他的可以放在一个g标签里,也可以分开放。在本示例代码中svgGraph...原创 2018-12-05 18:17:56 · 15951 阅读 · 3 评论 -
d3.js学习笔记vue2(4)匿名函数
d3为了灵活,在很多地方需要使用匿名函数,比如设定属性时curvesClass.node.selectAll('path') .data(points) .enter() .append('path') .attr('d', (d) => curvesClass.lineGenerator(d)) // 匿名函数 ...原创 2018-12-05 18:39:16 · 672 阅读 · 1 评论 -
d3.js学习笔记vue2(5)drag拖拽操作数据
在网上有很多教程讲如何用drag拖拽操作图形元素的,但是他们都没说如何操作数据。因为我要写的东西是一个通过在图形界面通过拖拽调整几何形状的程序,所以特别注意了这一点。首先在zoom里已经有了拖拽功能了,可以让整个场景平移,但是原始数据不变。而我需要在特定单元上添加拖拽功能,具体来说就是拖拽线条上的标记点,改变线条的数据。所以必须要让特定的拖拽覆盖zoom的拖拽,也就是说在程序执行时...原创 2018-12-05 19:13:08 · 5653 阅读 · 1 评论 -
d3.js学习笔记vue2(6)嵌套式select
今天遇到的一个问题是:有一个三层数组,第一层是线条,第二层是点,第三层是点的x、y值,所以为了能够一次性绘制出一组线上面所有的控制点,对应的用法要稍作调整。根据https://bost.ocks.org/mike/nest/drawSymbols (points, symbolsObject) { symbolsObject.node.selectAll('g') .da...原创 2019-02-03 23:24:28 · 839 阅读 · 1 评论 -
d3.js学习笔记vue2(7)插入单元
有一组线条,通过一个三层的数组传递数据,第一层是线条,第二层是点,第三层是x、y坐标值,根据之前的d3.js学习笔记(6)嵌套式select绘制这个图形是很容易的。但是新的需求是:上游数据更新,在中间插入了一条新的线,为了实现这个需求,遇到了一些弯路。第一种错误方法:继续使用data()绑定,试图让d3自动更新,简单来说就是最初绘制这条线时使用的代码,在数据points更新后,再次用同...原创 2019-02-04 00:35:10 · 488 阅读 · 1 评论 -
d3.js学习笔记vue2(8)更新数据
d3可以根据输入的数据来绘制各种图形,如果数据更新了呢?需要刷新图形,这个时候要注意,刷新图形和绘制图形是不同的。绘制图形需要先绑定数据,然后根据数据的size确定要生成多少个svg节点,然后再根据节点去处理各个数据d3.selectAll('path') .data(points) .enter() .append('path') .attr('d', (d) =>...原创 2019-06-10 07:44:03 · 3852 阅读 · 1 评论