交互式數據可視化－D3.js（四）形狀生成器

Terry_Tai 發布于2019-08-02 11:54 / 999人閱讀

摘要：形狀生成器線段生成器使用默認的設置構造一個生成器。如果指定了則將訪問器設置為指定的函數或數值并返回當前生成器。

形狀生成器 線段生成器

var linePath = d3.line() - 使用默認的設置構造一個 line 生成器。

linePath.x() - 如果指定了 x 則將 x 訪問器設置為指定的函數或數值并返回當前 line 生成器。如果沒有指定 x 則返回當前 x 訪問器，默認為:

function x(d) {
    return d[0];
}

linePath.y() - 如果指定了 y 則將 y 訪問器設置為指定的函數或數值并返回當前 line 生成器。如果沒有指定 y 則返回當前 y 訪問器，默認為:

function y(d) {
    return d[1];
}

linePath.curve() - 如果指定了 curve 則表示設置當前的曲線插值方法并返回線條生成器。

使用方法如下：

var lines = [[80, 80], [200, 100], [200, 200], [100, 200]]
var linePath = d3.line().curve(d3.curveCatmullRom.alpha(0.5));
var drawLine = d3.select("#line").append("svg").attr("width", 400).attr("height", 300);
drawLine.append("path").attr("d", linePath(lines)).attr("stroke", "black").attr("stroke-width", "3").attr("fill", "none");

區域生成器

在需要生產折線或曲線下方面積的時候，使用區域生成器, 數據訪問器有x(), x0(), x1(), y(), y0(), y1()六個，不需要全部使用,其他方法與線段生成器基本類似，使用方法如下:

var areas = [80, 120, 130, 70, 60, 90]
var dragArea = d3.area();=
dragArea.x(function(d, i){
    return 20 + i * 30;
 })

dragArea.y0(function(d, i){
    return 400 / 2;
})

dragArea.y1(function(d, i){
    return 400 / 2 - d;
})
dragArea.curve(d3.curveCatmullRom.alpha(0.5))
var drawLine = d3.select("#line").append("svg").attr("width", 400).attr("height", 300);
drawLine.append("path").attr("d", dragArea(areas)).attr("stroke", "black").attr("stroke-width", "3").attr("fill", "#f0f");

弧生成器

弧生成器可憑借起始角度，終止角度，內半徑，外半徑等，生產弧線的路徑，因此在制作餅狀圖，弦圖等圖表的時候很常用。常用方法有：

var arc = d3.arc() - 設置弧生成器

arc.innerRadius(80); - 設置環的內半徑

arc.startAngle(0) - 設置起始角度

arc.endAngle(Math.PI) - 設置終止角度

arc.cornerRadius(10) - 設置拐角半徑

大致的使用方法：

var arc=d3.arc().innerRadius(80)outerRadius(100).startAngle(0).endAngle(Math.PI);
var drawLine = d3.select("#line").append("svg").attr("width", 400).attr("height", 300);
drawLine.append("path")
    .attr("d", arc())
    .attr("stroke", "black")
    .attr("stroke-width", "3")
   .attr("fill", "#f0f")
   .attr("transform", "translate(200, 150)");

弦生成器

弦生成器根據兩段弧來繪制，需要以下幾個方法：

var chord = d3.ribbon() - 設置弦生成器

chord.source() - 設置起始弧度

chord.target() - 設置終止弧

chord.radius() - 設置弧半徑

chord.startAngle() - 設置弧的起始角度

chord.endAngle() - 設置弧的終止角度

如果使用默認訪問器，生成弦圖，其數據格式為：

 {
    source: {
        startAngle: 0.2,
        endAngle: Math.PI * 0.3,
        radius: 100
    },
    target: {
        startAngle : Math.PI * 1,
        endAngle: Math.PI * 1.6,
        radius: 100
    }
}

也可以更改方法，使用自定義的數據：

var data = {
    a: {
        a1: 0.2,
        a2: Math.PI * 0.3,
    },
    b: {
        a1 : Math.PI * 1,
        a2: Math.PI * 1.6,
    }
}

var chord = d3.ribbon();
chord.source(function(d){
    return d.a
})
chord.target(function(d){
    return d.b
})
chord.radius(100);
chord.startAngle(function(d){
    return d.a1
})
chord.endAngle(function(d){
    return d.a2
})

GPU云服務器云服務器 d3.js數據可視化實戰大數據可視化 d3.js d3.js數據可視化實戰手冊交互式數據可視化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53194.html

交互式數據可視化－D3.js（四）形狀生成器

摘要：形狀生成器線段生成器使用默認的設置構造一個生成器。如果指定了則將訪問器設置為指定的函數或數值并返回當前生成器。形狀生成器線段生成器 var linePath = d3.line() - 使用默認的設置構造一個 line 生成器。 linePath.x() - 如果指定了 x 則將 x 訪問器設置為指定的函數或數值并返回當前 line 生成器。如果沒有指定 x 則返回當前 x 訪問器...

crossea 2019-08-23 12:44 評論0 收藏0
交互式數據可視化－D3.js（一）

摘要：如其中，和表示繪制區域的寬高，表示版本號。下面分別是繪制一個多邊形和折線路徑標簽功能最豐富，以上圖形都可以使用路徑制作出來，用法與折線類似給出一個坐標點在坐標前添加一個英文字母，表示如何運動到此坐標點點。英文字符按照功能分為五類。在D3中會穿插SVG 方便大家對D3對使用 SVG簡介可縮放矢量圖(scalabel vector graphics)，是用于描述二維矢量圖形的一種圖形格...

MASAILA 2019-08-20 10:39 評論0 收藏0
使用JavaScript和D3.js實現數據可視化

摘要：它的全稱是數據驅動文檔，并且它被稱為一個互動和動態的數據可視化庫網絡。我們將使用文本編輯器和瀏覽器。出于測試目的，建議使用工具來檢查和調試和，例如或。使矩形反映數據目前，我們陣列中的所有矩形沿軸具有相同的位置，并且不代表高度方面的數據。歡迎大家前往騰訊云+社區，獲取更多騰訊海量技術實踐干貨哦~ 本文由獨木橋先生發表于云+社區專欄介紹 D3.js是一個JavaScript庫。它的...

mingde 2019-08-23 10:56 評論0 收藏0
聲明式與響應式——前端新一代數據可視化方案

摘要：數據可視化圖表圖表作為數據可視化最常見的表現形式之一，往往被以偏概全的認為圖表就是數據可視化。嚴格來說，數據可視化應該是連接數據與視覺的一個映射關系，將數據映射成人更容易感知其規律的可視化結果。題目中的新一代是個相對的概念，事實上本文即將介紹的方法已經有了生產環境可用的實現方案（這也側面佐證了其可行性），但考慮到此方法與現在大部分前端項目中所使用的數據可視化方案相比仍有一些優勢，因此...

xuhong 2019-08-20 12:34 評論0 收藏0
常用的數據可視化工具

摘要：俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。是一個地圖庫，主要面向數據可視化用戶。俗話說，不會使用工具來完成任務的都是進化不完全的表現，大數據時代，可視化已經深深鉆進我們的生活，使用可視化工具也變的相當普遍，今天我們來總結下當下可視化工具都有哪些。 showImg...

philadelphia 2019-08-22 11:06 評論0 收藏0