d3js v5.9.2 如果对原生JS还有Jq比较熟悉的话，d3的交互很快就能掌握 还是拿完整的柱形图例子修改：完整的柱图 selection.on() d3通过selection.on()对元素进行事件绑定或移除，用法很简单，例如： {代码...} 注意这里使用function(){}才有this指向对应元素 用法和原生JS及jq几乎一样 给柱状图进行事件绑定 这里我们使得...

d3js v5.9.2 使用d3创建动态图表主要使用到了d3.trasition部分的API，通过他们可以完成动画 我的学习记录是通过一个例子了解这些API

d3js.org v5.9.2 之前只是各个部分的demo，现在将各部分整合起来，发现还是学到了不少东西 主要是加深了对scale（比例尺）的理解

本片blog记录d3坐标轴入门，使用版本v5.9.2 SVG如何实现坐标轴 d3生成的坐标图是通过svg的path(路径)元素 + g + line + text元素组成的，如下图 path表示的是底部坐标轴（不包括内部刻度），如下 这部分通过d描绘，在d3中称为outer tick g容器则包括了text和line作为inner tick line即线，text即文字 d3实现坐标轴主要步...

相比HTML元素，使用SVG可以绘制出更多的图形，此文尝试将d3.js与SVG结合 由于我也是第一次使用SVG，所以主要根据此篇blog的顺序来Let’s Make a Bar Chart, II

入门d3.js，根据官网部分教程学习，发现因为版本更新，有些api和概念可能不适用，但总体思想未变。本文思路跟随此篇blogLet’s Make a Bar Chart学习，加上自己的理解，并且查阅了部分更新资料

思路很简单，只有橡皮筋式绘制功能要注意，以下总结mousedown，mousemove，mouseup三个阶段的思路 mousedown：记录start位置，drag（记录是否处于拖动状态）设置为true，getImageData(橡皮筋效果关键1) mousemove：获取拖动时的位置pos，putImageData(对应getImageData，橡皮筋效果关键2)，根据pos与start画直线 mouseup...

Three.js 选择对象的本质是从点击位置发射光线，但屏幕坐标系与webgl坐标系是不同的，而把屏幕的二维坐标转化为三维坐标就是关键，做一步换算后交由Raycaster的setFromCamera方法即可。所以思路如下：1.获取屏幕坐标(x, y)2.换算至webgl坐标中的(x2,y2)，此时长度仍为像素单位下的长度3.由于webgl坐标轴的范围为(-1,1)，...