D3.js使用过程中的常见问题(D3版本D3V4)

目录

一、学习D3我必须要学习好SVG矢量图码？
二、如何理解D3给Dom节点绑定数据时的Update、Enter和Exit模式

三、D3绑定数据时用datum与data有什么不一样？

四、SVG图中用attr来设置属性和用style来设置样式时，用style来设置样式的权重会更高

五、D3使用链式写法时，写完transition动画后不能链着继续写append添加元素操作

六、如何给path设置缓动？

七、D3普通的缓动动画

八、给节点添加title，鼠标mouseover显示普通提示文本效果

九、getBBox按长方形获取节点的大小、长宽及坐标等等信息

十、使用遮罩制作动画

十一、D3常用的SVG元素类型有哪些？

十二、D3对svg元素设备位置一般有两种方式，使用坐标x、y或者使用transform来设置。

十三、数据可视化（不限D3）于要了解的一些基础概念

前言

上一回合写到《D3.js从入门到“放弃”指南》代码中D3结合了react全家桶来写可能有点副格略高。在这里回归原点，整理好D3使用过程中或者学习过程中遇到过的常见问题。这里主要是新手专区，把新手入门D3时常见的问题记录下来，D3高手不喜勿喷，当然也延续了自己的习惯，持续更新，把常见的问题记录下来好处就是平时可以当自己的Q&A顺手拿来使用，毕竟人的大脑有限。

一、学习D3我必须要学习好SVG矢量图码？

我觉得得SVG适量图是必须的，为什么要学习SVG图呢？因为D3.js堪称SVG中的jQuery，稍稍熟悉点jQuery的话，会更容易上手D3，当然你如果想用D3输出Canvas图或者你牛逼哄哄的说老子就只用D3来玩Canvas怎么嘀也可以，但SVG图操作起来更加灵活，更加方便调试，在Chrome中调试SVG图更加直观。D3只是一个作图工具，你完全也可以手写SVG的XML代码来完成作图，如下面是一个手画简单柱状图：

            <svg class="chart" width="100%" height="120">
                <g transform="translate(0,0)">
                    <rect width="0.7619047619047619em" height="19"></rect>
                    <text x="0.6619047619047619em" y="10" dy=".35em">4</text>
                </g>
                <g transform="translate(0,20)">
                    <rect width="1.5238095238095237em" height="19"></rect>
                    <text x="1.4238095238095236em" y="10" dy=".35em">8</text>
                </g>
                <g transform="translate(0,40)">
                    <rect width="2.857142857142857em" height="19"></rect>
                    <text x="2.757142857142857em" y="10" dy=".35em">15</text>
                </g>
                <g transform="translate(0,60)">
                    <rect width="3.0476190476190474em" height="19"></rect>
                    <text x="2.9476190476190474em" y="10" dy=".35em">16</text>
                </g>
                <g transform="translate(0,80)">
                    <rect width="4.380952380952381em" height="19"></rect>
                    <text x="4.280952380952382em" y="10" dy=".35em">23</text>
                </g>
                <g transform="translate(0,100)">
                    <rect width="8em" height="19"></rect>
                    <text x="7.9em" y="10" dy=".35em">42</text>
                </g>
            </svg>

二、如何理解D3给Dom节点绑定数据时的Update、Enter和Exit模式

代码如下：

// Update…
var p4 = d3.select("#my_p_4")
  .selectAll("p") // 选择所有的P元素
  .data([4, 8, 15, 16, 23, 40]) // 给所有的P元素相应绑定数据（当然P元素有可能与数组元素个数不相等，则要转入下面的Enter和exit操作）
  .text(function (d) { return d; }); // 改变所有的P元素的text为相应的数组的值

p4.enter().append("p") // 如果原有P节点元素小于数组的元素个数，则要给父节点append节点补足
    .text(function (d) { return d; });

// Exit…
p4.exit().remove(); // 如果原有P节点元素大于数组的元素个数，则要执行删除操作，以保证p节点元素个数与传入的data数组元素个数相当

三、D3绑定数据时用datum与data有什么不一样？

用data是给所有的节点去绑定对应的data里面的数组元素值并一一匹配，而使用datum是给所有的节点绑定一样的数据值。

四、SVG图中用attr来设置属性和用style来设置样式时，用style来设置样式的权重会更高

style设置权重其实比用css样式表来设置更高，代码如下：

d3.select("#my_chart_2 rect")
.style("width", 20) // 同样设宽度用style生效
.attr("width", 40); // 同样设宽度用attr权重没style高，会失效

五、D3使用链式写法时，写完transition动画后不能链着继续写append添加元素操作

一般可以这么操作，先定义变量暂存节点再单独写动画或者单独写append追加元毒操作，代码如下：

        var g = chart.append("g")
        .style(‘fill-opacity‘, 0);
        .transition()
        .duration(1000)
        .style(‘fill-opacity‘, 1); // 动画渐现  

        /*g.selectAll("rect") // 绘画所有的矩形
            .data(data)
            .enter()
            .append("path")...
        */

六、如何给path设置缓动？

如画饼图时，想加上缓动动画，代码如下：

        let arc = d3.arc() // 定义单个圆弧
            .innerRadius(0)
            .padAngle(0);
        let pie = d3.pie() // 定义饼图
            .sort(null)
            .value(function (d) { return d.population; });
        g.selectAll(".arc") // 画环图
            .data(pie(data))
            .enter().append("path")
            .attr("cursor", "pointer")
            .attr("class", "arc")
            .attr(‘stroke‘, function (d) { return colors(d.data.age); })
            .style("fill", function (d) { return colors(d.data.age); })
            .each(function(d) { // 储存当前起始与终点的角度、并设为相等
                let tem = {...d, endAngle: d.startAngle};
                d.outerRadius = radius - 10;
                this._currentData = tem;
            })
            .transition()
            .duration(100)
            .delay(function (d, i) { return i * 100; })
            .attrTween("d", function(next) { // 动态设置d属性、生成缓动画
              var i = d3.interpolate(this._currentData, next);
              this._currentData = i(0);　// 重设当前角度
              return function(t) {
                return arc(i(t));
              };
            });

或者单独定义好缓动函数，代码如下：

        g.selectAll(".arc") // 画环图
            .data(pie(data))
            .enter().append("path")
            .each(function(d) { // 储存当前起始与终点的角度、并设为相等
                let tem = {...d, endAngle: d.startAngle};
                d.outerRadius = radius - 10;
                this._currentData = tem;
            })
            .on("mouseover", arcTween(radius + 50, 0))
    　　　　.on("mouseout", arcTween(radius - 10, 150))
            .attr("cursor", "pointer")
            .attr("class", "arc")
            .style("fill", function (d) { return colors(d.data.age); })
            .transition()
            .duration(750)
            .attrTween("d", function(next) { // 动态设置d属性、生成动画
              var i = d3.interpolate(this._currentData, next);
              this._currentData = i(0);　// 重设当前角度
              return function(t) {
                return arc(i(t));
              };
            });      

         function arcTween(outerRadius, delay) { // 设置缓动函数
          return function() {
            d3.select(this).transition().delay(delay).attrTween("d", function(d) {
              var i = d3.interpolate(d.outerRadius, outerRadius);
              return function(t) { d.outerRadius = i(t); return arc(d); };
            });
          };
        }

七、D3普通的缓动动画

如果想要给柱图添加每条柱由左到右按顺序缓动弹出，代码如下：

        g.selectAll(".bar")// 画柱图
            .data(data)
            .enter().append("rect")
            .attr("x", function (d) { return x(d.letter); })
            .attr("y", height) // 控制动画由下而上
            .attr("width", x.bandwidth())
            .attr("height", 0) // 控制动画由下而上
            .transition()
            .duration(200)
            .ease(d3.easeBounceInOut) // 这里还有d3.easeLinear、d3.easeCubicOut等等多种效果，可自行查看API 
            .delay(function (d, i) { return i * 200; })
            .attr("y", function (d) { return y(d.frequency); })
            .attr("height", function (d) { return height - y(d.frequency); });

八、给节点添加title，鼠标mouseover显示普通提示文本效果

当需要hover提示文本效果时，可以添加title，或者如果想要更加丰富的自定义效果可以使用开源的d3插件d3-tip，也可以自己写一个hover效果，实现起来的思想就是on(‘mouseover‘,callback)方式，代码如下：

        g.append("g")//
            .selectAll(‘rect‘)
            .data(data)
            .enter()
            .append(‘rect‘)            //...
            .append(‘title‘) // 在后面添加title
            .text(function(d) { return d.name; });

九、getBBox按长方形获取节点的大小、长宽及坐标等等信息

在应用场景中，我们经常也会遇到要获得某元素的长宽等信息，实现代码如下：

        label.insert("rect", "text") // 生成背景白块
            .datum(function () { return this.nextSibling.getBBox(); }) // 这里在text前插入一个rect，并按照text的属性来设置长宽及坐标
            .attr(‘fill‘, ‘#fff‘)
            .attr("x", function (d) { return d.x; })
            .attr("y", function (d) { return d.y; })
            .attr("width", function (d) { return d.width; })
            .attr("height", function (d) { return d.height; });

十、使用遮罩制作动画

当你实现不想花那么多时间去在作图时实现动画，可以考虑在SVG遮罩里面加动画来实现同样的效果，代码如下：

        chart.append("defs").append("clipPath") // 添加长方形方块，遮罩作用
            .attr("id", "clip")
          　.append("rect")
            .attr("height", height)
            .attr("width", 0) // 用遮罩实现线动画
            .transition()
            .duration(1000)
            .attr("width", width);

        let serie = g.selectAll(".serie") // 生成两线条
            .data(series)
            .enter().append("g")
            .attr("class", "serie");

        serie.append("path") // 绘画线条
            .attr(‘clip-path‘, ‘url(#clip)‘) 
            .attr("class", "line")
            .style("stroke", function (d) { return z(d[0].key); })
            .attr(‘fill‘, ‘none‘)
            .attr("d", line);

十一、D3常用的SVG元素类型有哪些？

circle, line, rect, path, svg, g, defs, clipPath, text, title

十二、D3对svg元素设备位置一般有两种方式，使用坐标x、y或者使用transform来设置。

一般来说，是两者配合使用，transform后再设置x, y坐标或者再结合dx, dy位置来设置节点的位置。

十三、数据可视化（不限D3）于要了解的一些基础概念

x轴, y轴, tick, legend, serie, brush, zoom, 散点, 线状图, 面积图, 柱状图, 饼图, 打包图, 弦图, 打包图, 雷达图, 力向导图, 树状图, 堆栈图, 组合线状/组合柱状图, 标签云图, geomap地图等

对应到D3API中必备的知识有：d3-selection(D3 选择器)  d3-shape(D3 作图图形图)  d3-transition(D3 过渡动画)  d3-axis(D3 坐标)  d3-scale(D3 比例尺生成工具)

交流与学习

  1. 本文作者Fast Mover  欢迎大家留言及多多指教
  2. 版权声明：欢迎转载学习 => 请标注信息来源于http://www.cnblogs.com/fastmover/p/7794519.html
  3. 本文所有的在线Demo
时间： 2024-08-26 23:23:08

D3.js使用过程中的常见问题(D3版本D3V4)的相关文章

IIS配置过程中的常见问题

解析Json需要设置Mime IIS6.0 1.打开IIS添加Mime项 关联扩展名:*.json内容类型(MIME):application/x-JavaScript      2.添加映射: 位置在IIS对应站点右键属性:”主目录”-”应用程序设置”-”配置”-”映射”-”添加”,会打开”添加/编辑应用程序扩展名映射” 扩展名:.json运行文件:C:\WINDOWS\system32\inetsrv\asp.dll动作:GET,POST IIS7.x 1.打开IIS添加Mime项 关联扩展

指针运用过程中的常见问题

1:为什么不能把局部变量的地址作为函数返回值返回? 答:当函数调用结束后,被调用函数的内存空间就会被释放,内存空间的使用权又会回到系统手中.虽然局部变量的地址被传回了主函数,但是由于这个地址所在的内存空间的使用权已经不在程序手中,所以此时取到的地址是一个不合法的地址,因此,不能把局部变量的地址作为函数返回值返回. 2:被调用函数形参的地址和实参的地址一样吗? 答: 举例:int a=12; int  b=10; judge(&a,&b);     //调用函数judge ,实参是变量a和b

D3.js数据可视化（二）——绘制弦图（Chord Layout）

树图网可视化实验 1. 实验要求 要求通过树,或者图.网的可视化聚类,分析某个公司的邮件社交网络.根据要求设计可视化方案,并利用D3工具实现可视化效果. 2. 过程 2.1. 可视化方案的设计思路 2.1.1. 可视化要求 1) 可视化该邮件社交网络. 2) 该可视化中的每个Edge都对应着一个权重(Emails per month或者weight),要求将该权重属性映射到一个图形化的属性,比如,color,types of line,size or shapes. 3) 可视化方案中要体现每个

前端编程提高之旅（八）----D3.js数据可视化data join解析

   D3.js作为一门轻型的可视化类库,非常便于将数据与web界面元素绑定,实现可视化.乐帝d3.js入门是大体看了一遍<d3js数据可视化实战>这本书,D3操作非常类似于jquery的使用,具体体现在两点: 选择器模块都采用CSS3标准 方法可以链式调用    有了jquery使用基础,相信再加上以上书籍的例子,调试很容易上手使用D3.js,乐帝目前认为D3.js与jquery区别在于:D3.js独有的数据结构概念及对SVG操作方便的实现.而深入理解D3原理,以上皮毛的理解就不够用了.  

数据可视化与D3.js

数据可视化 数据可视化是如何把数据更好的展现出来的一个课题,在大数据出现后,它变得更为重要和迫切. 以前使用excel进行柱状图.饼状图.折线图等是最常用的数据可视化手段之一,而在WEB端,使用流行的extjs.fusioncharts.jfreechart,或者相对不太流行的amchart.highcharts.Bootstrap里的charts.jquery的一些插件等等都可以实现饼状图等的展示. 然而我这里说的数据可视化并不是这种传统的.简单的图形,而是更为复杂,能够在有限的空间里展示更多

D3.js从入门到“放弃”指南

前言 近期略有点诸事不顺,趁略有闲余之时,玩起D3.js.之前实际项目中主要是用各种chart如hightchart.echarts等,这些图形库玩起来貌都是完美的,一切皆可配置,但几年前接触了D3之后,觉得前面那chart类库局限的地方在于,基本不可定制:而D3呢,你说了算,你想画出什么样的图,你说了算,自由度很大,当时就有点膜拜和仰慕,小打小闹的玩了几下,没有沉下心来专心去玩,当时觉得真的很难.不理解,也看不进去. 后面因为接触了react.redux,接触了函数式编程.再回过头来从新捣鼓起

Rancher 2.0部署过程中常见问题分析与解决

本文是Rancher 2.0部署与使用过程中常见的问题及其解决方法,多数问题整理收集自Rancher官方技术交流群内用户的提问与反馈.欢迎扫描文末二维码,添加Rancher小助手为好友,加群获得更多技术支持. 本文主要内容为: 1.部署Rancher 2.0的环境需求 推荐使用的操作系统 推荐的硬件配置 支持的docker版本 防火墙需要允许通过的端口 2.部署过程中的常见问题及排查思路 环境信息残留 openssh版本过低问题 nodeport端口只有一台机器能访问 部署使用calico网络部

使用ProcessOnh绘制流程图的过程中一些常见的问题

身边有不少朋友都在使用ProcessOn绘制流程图等相关内容,但是在使用上经常会遇到一些操作上的问题,包括我自己使用也是. 有时候遇到问题一开始会觉得是不是产品出现了bug,或者是产品不支持该操作,但后来在接下来的工作中发现是因为自己并不是很熟悉工具平台的使用,所以导致了在操作过程中出现了一系列的问题,然后就留心把自己遇到的不解的问题都进行了一下整理,汇总了那些高频的问题,和大家分享一下. 快捷键: 首先就是产品内的快捷键,以前以为是没有的,但咨询别人才找到,其实不怪用户不了解,而是入口确实有点

[2] D3.js中如何使用数据和选择元素

对D3.js或数据可视化有兴趣的朋友欢迎到 www.ourd3js.com 讨论. 接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2</p> <p>Hello World 3</p> 定义一个集合set,里面有三个元素: var set = ["I like dog","I like cat&qu