d3.js線（）。X（X）.Y（Y）

Question

我學習從this演示貝塞爾曲線，在一開始就定義這樣

var w = 250, 
    h = 300, 
    t = .5, 
    delta = .01, 
    padding = 10, 
    points = [{x: 10, y: 250}, {x: 0, y: 0}, {x: 100, y: 0}, {x: 200, y: 250}, {x: 225, y: 125}], 

    bezier = {}, 
    line = d3.svg.line().x(x).y(y), 
    n = 4, 
    stroke = d3.scale.category20b(), 
    orders = d3.range(2, n + 2); 

我也沒辦法了一系列變量line = d3.svg.line().x(x).y(y)是什麼意思，誰能解釋一下？

Answer 1

查看d3.svg.line()的奇幻d3js documentation。

d3.svg.line()返回一個函數，該函數可以用輸入數據點調用並返回描述行的SVG路徑。輸入項目的x/y值由傳遞給line().x()和line().y()的值確定，該值可以是函數或常量。通常他們會是d3.scale()。

例如，

var data = [{x: 1, y: 3}, {x: 50, y: 100}, {x: 100, y: 0}]; 
var x = d3.scale.linear().domain([0, 200]).range([0, 20]); 
var y = d3.scale.linear().domain([0, 100]).range([0, 10]); 
var line = d3.svg.line() 
    .x(function(d){ return x(d.x); }) 
    .y(function(d){ return y(d.y); }); 

line(data); 

將返回「M0.1,0.3L5,10L10,0」，其可被分配給一個svg:path的d屬性和描述了一種線通過點0.1去， 0.3 5,10和10,0。