如何独立调用d3.svg.line()？直接传入数据集的实现方法

我来帮你理清这个问题～你之前尝试直接d3.svg.line(lineData)的写法无效，核心原因是D3 v3里的d3.svg.line()是个工厂函数——它本身不直接接收数据集当参数，而是先让你配置x/y访问器、插值方式等规则，然后返回一个真正用来处理数据生成路径的函数。

看你贴的源码就能明白：外层的function() { ... return line; }就是这个工厂，它返回的内部line(data)函数才是负责把数据集转换成SVG路径字符串的家伙。所以你不能直接把数据传给工厂函数，得先完成配置，再把数据传给工厂返回的函数。

正确的写法（绕过单独定义lineFunction） #

其实你可以把配置和数据调用合并成一行，不用单独声明lineFunction，写法如下：

var width = 400;
var height = 400;
var svg = d3.select('body').append('svg');
svg.attr('width', width);
svg.attr('height', height);

// 数据集
var lineData = [
  { "x": 1, "y": 5},
  { "x": 20, "y": 20},
  { "x": 40, "y": 10},
  { "x": 60, "y": 40},
  { "x": 80, "y": 5},
  { "x": 100, "y": 60}
];

// 直接在attr("d")里完成配置+传数据
var lineGraph = svg.append("path")
  .attr("d", d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate('linear')
  (lineData)) // 配置完后立刻调用返回的line函数，传入数据集
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

原理说明 #

这里的关键是：d3.svg.line()调用后返回的是那个能处理数据的line函数，所以在链式配置完.x()、.y()、.interpolate()之后，直接加个(lineData)，就相当于把数据集传给了这个返回的函数，和先把配置好的函数存成lineFunction再调用lineFunction(lineData)完全等价，这样就绕过了单独定义lineFunction的步骤。

你之前的错误就是把lineData直接传给了工厂函数d3.svg.line()，但这个工厂函数根本不接收数据参数，自然就不会生效啦。

内容的提问来源于stack exchange，提问作者Michael W. Czechowski