形狀生成器

線段生成器

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

使用方法如下：

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

原文地址：https://segmentfault.com/a/1190000016897684

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