D3.js使用過程當中的常見問題(D3版本D3V4)

目錄

1、學習D3我必需要學習好SVG矢量圖碼？
2、如何理解D3給Dom節點綁定數據時的Update、Enter和Exit模式
3、D3綁定數據時用datum與data有什麼不同？
4、SVG圖中用attr來設置屬性和用style來設置樣式時，用style來設置樣式的權重會更高
5、D3使用鏈式寫法時，寫完transition動畫後不能鏈着繼續寫append添加元素操做
6、如何給path設置緩動？
7、D3普通的緩動動畫
8、給節點添加title，鼠標mouseover顯示普通提示文本效果
9、getBBox按長方形獲取節點的大小、長寬及座標等等信息
10、使用遮罩製做動畫
11、D3經常使用的SVG元素類型有哪些？
12、D3對svg元素設備位置通常有兩種方式，使用座標x、y或者使用transform來設置。
十3、數據可視化（不限D3）於要了解的一些基礎概念
十4、笛卡爾座標繪圖適合製做普通線狀、柱狀等圖；極座標繪圖適合製做螺旋形圖表

本文同步發佈於 http://www.kt5.cn/fe/2019/11/04/d3-js/

前言

        上一回合寫到《D3.js從入門到「放棄」指南》代碼中D3結合了react全家桶來寫可能有點副格略高。在這裏迴歸原點，整理好D3使用過程當中或者學習過程當中遇到過的常見問題。這裏主要是新手專區，把新手入門D3時常見的問題記錄下來，D3高手不喜勿噴，固然也延續了本身的習慣，持續更新，把常見的問題記錄下來好處就是平時能夠當本身的Q&A順手拿來使用，畢竟人的大腦有限。

        點擊查看全部在線Demo

1、學習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>

View Code

 

2、如何理解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數組元素個數至關

 

3、D3綁定數據時用datum與data有什麼不同？

用data是給全部的節點去綁定對應的data裏面的數組元素值並一一匹配，而使用datum是給全部的節點綁定同樣的數據值。

 

4、SVG圖中用attr來設置屬性和用style來設置樣式時，用style來設置樣式的權重會更高

style設置權重其實比用css樣式表來設置更高，代碼以下：

d3.select("#my_chart_2 rect") .style("width", 20) // 一樣設寬度用style生效
.attr("width", 40); // 一樣設寬度用attr權重沒style高，會失效

 

5、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")... */

 

6、如何給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); }; }); }; }

 

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

 

8、給節點添加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; });

 

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

 

10、使用遮罩製做動畫

當你實現不想花那麼多時間去在做圖時實現動畫，能夠考慮在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);

 

11、D3經常使用的SVG元素類型有哪些？

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

 

12、D3對svg元素設置位置通常有兩種方式，使用座標x、y或者使用transform來設置。

通常來講，是二者配合使用，transform後再設置x, y座標或者再結合dx, dy位置來設置節點的位置。

 

十3、數據可視化（不限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 比例尺生成工具)

 

十4、笛卡爾座標繪圖適合製做普通線狀、柱狀等圖；極座標繪圖適合製做螺旋形圖表

如笛卡爾座標畫線會用到普通的d3.line，而極座標畫線會用到d3.lineRadial。

 

交流與學習

1. 本文做者Fast Mover  歡迎你們留言及多多指教
2. 版權聲明：歡迎轉載學習 => 請標註信息來源於http://www.cnblogs.com/fastmover/p/7794519.html
3. 本文全部的在線Demo