1

我正在研究这个演示中的贝塞尔曲线，一开始它定义了一个像这样的系列变量

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)意思，谁能解释一下？

4

1 回答 1

9

查看精彩的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”，它可以分配给dan 的属性svg:path并描述一条穿过点 0.1,0.3 5,10 和 10,0 的线。

于 2013-04-03T13:31:14.573 回答