Question

我正在使用d3js v3，我试图通过调用带参数的行函数来创建一个迷你图。当我这样做时：

.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); })

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

1 个答案: