Javascript 如何独立调用d3.svg.line（）？

lineFunction在本例中与d3.svg.line对应。但是，稍后，lineFunction将作为一个带有参数lineData的函数填充，即具有x和y坐标的点列表。如何绕过lineFunction并将数据集直接包含在d3.svg.line中

我的方法是直接调用d3.svg.linedata：

但这没有任何意义，只要这不是接受参数的函数。我还研究了D3代码库，发现line函数确实接受输入：

export default function() {
  var x = pointX,
  // ...
  function line(data) {
    // ...
  }
  // ...
  return line;
}

以下是一个运行示例：

var宽度=400； var高度=400； var svg=d3。选择“body”。追加“svg”； attr'width'，width； 属性'height'，height； //这就是我们上面讨论的访问器函数 var lineFunction=d3.svg.line .xfunctiond{return d.x；} .yFunction{return d.y；} .插入“线性”； //我们生产线的数据 变量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} ]; //我们画的路线 var lineGraph=svg.appendpath .attrd，lineFunctionlineData .蓝色 .笔划宽度，2 .attrfill，无； svg{ 字体系列：Helvetica Neue，Helvetica； } .线路{ 填充：无； 中风：000； 笔画宽度：2px； } 您可以在配置d3.svg.line后调用它，如：

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))

因此，修改后的代码段如下所示： var宽度=400； var高度=400； var svg=d3。选择“body”。追加“svg”； attr'width'，width； 属性'height'，height； //我们生产线的数据 变量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} ]; //我们画的路线 var lineGraph=svg.appendpath .attrd，d3.svg.line .xfunctiond{return d.x；} .yFunction{return d.y；} .插入“线性”线数据 .蓝色 .笔划宽度，2 .attrfill，无； svg{ 字体系列：Helvetica Neue，Helvetica； } .线路{ 填充：无； 中风：000； 笔画宽度：2px； }

---

但是你能解释为什么变量会变成函数吗？为什么我不能直接调用该函数呢？从d3的设计方式来看，调用d3.svg.line总是返回一个函数，该函数可以进一步配置为.x、.y等。它不是为您所考虑的用例而设计的，而是使用了一种重函数的理念。您可以在上阅读有关它的更多信息，而不是应该使用的插值.curved3.curveLinear：var lineGraph=svg.appendpath.attrd，d3.svg.line.xfunction{return d.x；}.yfunction{return d.y；}.curved3。curveLinearlineData@uzay95，这个问题是为d3v3写的，它没有d3.curveLinear，但我已经更新了我的答案，包括你的回答。谢谢

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))