d3.js 佈局(layout)是什麼

時間 2019-11-22

標籤 d3.js 佈局 layout 什麼欄目 JavaScript 简体版

原文原文鏈接

前言

經過以前的學習實踐了一陣子d3，可是不少效果實現都是照着demo改改下來的，沒有本身一套完整的步驟。在通過更多地瞭解與學習以後，終於略知一二，其中最大關係的就是d3的佈局(layout)。css

d3.js繪圖步驟

d3的繪圖步驟相比Echarts等開箱即用的框架複雜得多，這裏拿來一張很棒的圖（來源爲十二月咖啡館，連接於文末）html

從中能夠看到佈局在其中起着關鍵的一步。

佈局究竟是什麼？

那麼d3中什麼是佈局呢？跟CSS同樣嗎？？？？
還有咱們以前的柱狀圖怎麼就不須要這玩意了？——>由於圖形太簡單。
回到正題，這裏我參考了三個不一樣地方出處的理解：git

十二月咖啡館：佈局的做用是：將不適合用於繪圖的數據轉換成了適合用於繪圖的數據。github

d3官方文檔： Layout functions sets up and modifies data so that it can be rendered in different shapes. The layout functions don't do the drawing of the shapes.算法

Visualization on the Web Tutorials：Layouts make it easier to spatially arrange, shape and size elements representing data on the screen.數組

同時在實踐以後，我添油加醋地給出了本身的理解：app

佈局(layout)是一個函數，將要可視化的數據data放入佈局函數中，通過算法處理，返回方便d3繪圖的數據。同時，佈局函數並不直接參與繪圖，只是告訴你繪圖所用的關鍵信息
框架

這麼說可能仍是有點晦澀，接下來我以一個demo說明less

pie(餅圖) demo

此demo學習了Visualization on the Web Tutorials的例子，連接置於文末，可是文中一個地方對d3函數鏈式返回理解有誤。svg

說明大部分寫在代碼註釋裏，下一部分根據註釋及解釋進一步說明，完整代碼點擊這裏

demo步驟說明

步驟1：肯定svg

。沒什麼好說的，可是仍是寫在步驟裏

<body>
    <svg class="pie-svg"></svg>
</body>
複製代碼

步驟2：假設數據及一些基礎數值

也沒什麼好說的，注意的一點就是svg的transform與css的有不一樣
看看假設的數據data，立刻用到

/** * 假設數據 */
    const data = [
        {
            name: 'A',
            percentage: 30
        },
        {
            name: 'B',
            percentage: 20
        },
        {
            name: 'C',
            percentage: 30
        },
        {
            name: 'D',
            percentage: 20
        }
    ];
    /** * 基礎數值 */
    const width = 800,
          height = 500,
          radius = Math.min(width, height)/2 - 10;
          console.log(radius);
    /** * 插入g容器 */
   const g = d3.select('.pie-svg')
                 .attr('width', width)
                 .attr('height', height)
                 .append('g')
                 .attr('transform', `translate(${width/2}, ${height/2})`);//圖形左上角相對畫布偏移
複製代碼

步驟3：pie layout——用於返回適合繪圖的數據

這裏就是重點了！經過layout生成方便繪圖的數據，先看代碼👇

/** * 定義layout generator(怎麼翻譯？？佈局發生器？？)，此例中即爲變量pie */
    const pie = d3.pie();
    //告訴layout generator怎麼處理要可視化的數據
    pie.value(function(d){
        return d.percentage;
    });
    //多數文章將佈局理解爲用於數據轉換，我我的添油加醋一番認爲以下： 
    //原數據 ————> layout generator ————> 便於可視化佈局的數據
    const pieData = pie(data);
    console.log('pieData:', pieData);//原數據於pieData[i].data之中
複製代碼

截圖pieData瞧瞧佈局函數幹了什麼

如圖，原來的data[i]置於pieData[i].data中，其餘的屬性好比startAngle、endAngele等等，就是方便繪圖的數據了，那怎麼使用呢？見下一步。

步驟4：arc generator——利用關鍵信息、繪圖使用的工具

layout給了咱們繪圖的關鍵信息，arc generator就是利用這些關鍵信息的工具。
arc generator可利用startAngle，endAngle這些屬性繪製path元素的d屬性來描繪路徑。

/** * 建立arc generator(此例中即爲變量arc)，經過pieData，生成path的d屬性 * 上述原理：arc經過pieData數組中每一個元素對象的startAngle,endAngle進行計算（outerRadius與innerRadius在此例中設置了統一） * 流程圖以下： * pieData[i]————>arc————>path元素d屬性 * 具體請看文檔:https://github.com/d3/d3-shape/blob/v1.3.4/README.md#arc */
    const arc = d3.arc();
    arc.outerRadius(radius);
    arc.innerRadius(0);
    console.log(`舉例:生成path的d屬性：\n`,arc(pieData[0]));
複製代碼

瞧瞧控制檯

如今有 最直觀的繪圖數據了！下一步就是直接往「畫布」上扔就能夠了

步驟5：畫畫

/** * 如今有了處理後的數據(pieData)和生成path的arc generator(arc) * 能夠開始畫圖了！ */

     //綁定數據，在g容器中插入g
    const groups = g.selectAll('g').data(pieData)
                    .enter()
                    .append('g');
    //畫path
    groups.append('path')
          .attr('d', arc)//將pieData[i]傳予arc
          .style('fill', d=>color(d.data.name));

    //畫text
    groups.append('text')
          .text(d=>d.data.name)
          .attr('transform', d=>`translate(${arc.centroid(d)})`) //計算path的中心位置
          .attr('dy', '.35em')
          .style('text-anchor', 'middle')
          .style('font-size', '20px');
複製代碼