国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

crossea / 1357人閱讀

摘要：形狀生成器線段生成器使用默認(rèn)的設(shè)置構(gòu)造一個(gè)生成器。如果指定了則將訪問器設(shè)置為指定的函數(shù)或數(shù)值并返回當(dāng)前生成器。

形狀生成器 線段生成器

var linePath = d3.line() - 使用默認(rèn)的設(shè)置構(gòu)造一個(gè) line 生成器。

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

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

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

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

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

使用方法如下：

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");
區(qū)域生成器

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

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");
弧生成器

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

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

arc.innerRadius(80); - 設(shè)置環(huán)的內(nèi)半徑

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

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

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

大致的使用方法：

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)");
弦生成器

弦生成器根據(jù)兩段弧來繪制，需要以下幾個(gè)方法：

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

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

chord.target() - 設(shè)置終止弧

chord.radius() - 設(shè)置弧半徑

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

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

如果使用默認(rèn)訪問器，生成弦圖，其數(shù)據(jù)格式為：

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

也可以更改方法，使用自定義的數(shù)據(jù)：

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98976.html

相關(guān)文章

  • 交互式數(shù)據(jù)可視化－D3.js（四）形狀生成器

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

    Terry_Tai 評(píng)論0 收藏0

  • 交互式數(shù)據(jù)可視化－D3.js（一）

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

    MASAILA 評(píng)論0 收藏0

  • 使用JavaScript和D3.js實(shí)現(xiàn)數(shù)據(jù)可視化

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

    mingde 評(píng)論0 收藏0

  • 聲明式與響應(yīng)式——前端新一代數(shù)據(jù)可視化方案

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

    xuhong 評(píng)論0 收藏0

  • 常用的數(shù)據(jù)可視化工具

    摘要：俗話說，不會(huì)使用工具來完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來總結(jié)下當(dāng)下可視化工具都有哪些。是一個(gè)地圖庫(kù)，主要面向數(shù)據(jù)可視化用戶。 俗話說，不會(huì)使用工具來完成任務(wù)的都是進(jìn)化不完全的表現(xiàn)，大數(shù)據(jù)時(shí)代，可視化已經(jīng)深深鉆進(jìn)我們的生活，使用可視化工具也變的相當(dāng)普遍，今天我們來總結(jié)下當(dāng)下可視化工具都有哪些。 showImg...

    philadelphia 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<