d3.js line().x(x).y(y)

Question

我正在研究这个演示的bezier曲线,一开始它定义了这样的一系列变量

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

检查出梦幻般的d3js文档上d3.svg.line().

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",它可以分配给a的d属性svg:path并描述通过点0.1,0.3 5,10和10,0的直线.