目录

一、学习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）于要了解的一些基础概念

十四、笛卡尔坐标绘图适合制作普通线状、柱状等图；极坐标绘图适合制作螺旋形图表

// 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.select("#my_chart_2 rect")

.style("width", 20) // 同样设宽度用style生效

.attr("width", 40); // 同样设宽度用attr权重没style高，会失效

        var g = chart.append("g")

        .style('fill-opacity', 0);

        .transition()

        .duration(1000)

        .style('fill-opacity', 1); // 动画渐现  

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

            .data(data)

            .enter()

            .append("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); };

            });

          };

        }

        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); });

        g.append("g")//

            .selectAll('rect')

            .data(data)

            .enter()

            .append('rect')
            //...
            .append('title') // 在后面添加title

            .text(function(d) { return d.name; });

        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; });

        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);