将参数传递到d3.svg.line var

Question

我正在使用d3js v3，我试图通过使用参数调用线路函数来创建一个sparkline。当我这样做时：

.attr("d", line)

我在我的SVG路径元素中获得了D属性。但是当我这样做时：

.attr("d", function(d){line(d);})

d属性未添加到DOM中。我尝试将变量重命名为脚本中其他地方未使用的东西。它没有帮助。

我的行函数是：

var line = d3.svg.line()
    .x(function (d) {
        return x(d.t);
    })
    .y(function (d) {
        return d.v * -20;
    })
    .interpolate("basis")
;

我的X和Xaxis功能在这里：

var x = d3.time.scale().range([0, width]).domain([t0, t1]).nice(),
    xAxis = d3.svg.axis().scale(x).tickFormat(customTimeFormat)
;

，我有：

var y = d3.scale.ordinal()
    .domain(["","A", "B", "C", "D", "E", "F", "G", "H", "I"])
    .range([0,-20,-40,-60,-80,-100,-120,-140,-160,-180])
;
var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
;

如果添加日志语句，我可以看到所有功能都按预期调用，即使我将行（d）的输出记录到控制台时，我也可以看到完整的" D"属性，但是它不会最终进入dom。

我在做什么错？

Answer 1

执行此操作时：

.attr("d", line)

您正在将line作为函数参考传递，该函数参考将作为回调调用并传递d作为参数。此功能的返回值将分配给属性。

当您这样做时：

.attr("d", function(d){line(d);})

您将新定义的函数传递为引用，该函数将被称为回调，就像上面一样。该函数的返回值将分配给属性。因为您的功能正在调用line(d)本身，因此您需要从函数返回其返回值：

.attr("d", function(d) { return line(d); })