d3
文章平均质量分 66
小湾生产队队长
这个作者很懒,什么都没留下…
展开
-
D3.js 秘技
目录制作 D3.js 动画transition 的名字客製动画数据绑定与元素集合绑定规则阶层元素属性设定Style v.s. Attr利用函数取值Encore: d3.scale 的神奇秘技制作 D3.js 动画transition 的名字D3.js 提供 transition() 函数供我们作动画,相当的方便,但是当我们需要多个动画一起执行时,该怎麽办?若我们对同一个物件调用的 transition 时间有重叠,后者会将前者完全取代掉,如下例我们原创 2022-05-20 10:27:00 · 2152 阅读 · 0 评论 -
D3 V4 各种鼠标事件的添加
目录一、拖拽节点二、放大缩小D3 V4 各种鼠标事件的添加一、拖拽节点//定义拖拽事件function dragged(d) { d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);}////节点绑定事件g.selectAll("circle") .data(points) .enter().append("circle") .attr("cx", f.原创 2021-12-14 18:51:03 · 887 阅读 · 0 评论 -
d3.js 坐标轴设置
常用代码:一、定义坐标轴// 数据var dataset = [2.5, 2.1, 1.7, 1.3, 0.9];// 定义比例尺var linear = d3.scale.linear() .domain([0, d3.max(dataset)]) .range([0, 250]);var axis = d3.svg.axis() .scale(linear) // 指定比例尺 .orient("bottom") // 指定刻度的方向原创 2021-07-26 18:19:50 · 1282 阅读 · 0 评论 -
D3.js插入 X轴文本标签 、Y轴文本标签、标题文字、图例文字
D3.js X轴 、Y轴、标题等文本标签D3的文本标签,标签就是一个text内容块啊,所以我们只要在svg中添加一个text然后再给这个text定位和指定内容,以及设计好样式即可。一、X轴//增加一个x轴的标签svg.append("text") .attr("transform", "translate(" + (width/2) + "," + (height + margin.bottom) + ")") .style("text-anchor", "middle.原创 2021-06-16 13:44:22 · 2203 阅读 · 0 评论 -
SVG常用元素和属性
目录SVG常用元素和属性一、总体介绍二、常用的SVG元素1、标签2、直线:标签3、矩形:标签4、多边形标签5、圆形:标签6、椭圆:标签7、路径: 标签8、文本:标签9、组:标签 10、图片:标签 11、其他标签三、svg标签常用属性1、id 属性2、class 属性3、stroke 属性4、stroke-width 属性5、stroke-opacity 属性6、fill 属性...原创 2021-04-20 11:37:45 · 875 阅读 · 0 评论 -
D3常见操作集合
D3常见操作集合一、根据值渲染不同的颜色1、地图根据不同区域的值渲染不同颜色创建svg <svg width="1500" height="900" style="margin-top: 100px;" id="mainsvg" class="svgs"></svg>设计svgvar svg = d3.select("#mainsvg") //选择id为mainsvg的dom .attr("width", 1500)原创 2021-04-20 10:17:51 · 350 阅读 · 0 评论 -
D3.JS基础语法
一、选择元素dom在d3.js中,选择的元素的函数有两个:d3.select():选择一个元素,如果有多个则选择第一个 d3.selectAll():选择所有的符合条件的元素常见的用法如下: var body = d3.select("body");//选择文档中的body元素 var svg = body.select("svg");//选择body中的svg元素 var p = body.selectAll("p");//选择body中所有的p元素原创 2020-10-14 10:42:46 · 690 阅读 · 1 评论