Question

我正在研究this demo中的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

在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”，可以将其分配给d的{{1}}属性，并描述通过点0.1,0.3 5的直线， 10和10,0。

d3.js line（）。x（x）.y（y）

1 个答案: