javascript - 如何换行 d3.svg.line？

Question

我有一个包含多个迷你图的网页。用户选择某些参数来控制迷你图，有些需要从服务器加载数据，有些则不需要加载新数据，例如更改图表类型(折线图、面积图、条形图等)。

我不想为这些参数重新加载整个图表，所以我一直在尝试操作路径，但我陷入困境，因为我还需要获取每个路径的原始数据来重建 x 和 y 函数:以及我自定义构建的颜色模式函数，该函数基于我从数据计算的阈值。

这就是我构建路径的方式:

var chart = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d) { return height-y(d); })
    .interpolate('basis');
g.append("path")
    .datum(data)
    .attr("class", "chart-path-" + me.id)
    .attr("d", chart);

这就是我想要更新的方式:

var line = function(data) {
    return d3.svg.line()
        .x(function(d,i) {
            var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
            return x(i);
        })
        .y(function(d, i) {
            var y = d3.scale.linear().domain([0, d3.max(data)]).range([0, height]);
            return height-y(d);
        })
        .interpolate('basis');
}
d3.selectAll(".chart-path-" + me.id)
    .attr("d", function(data) { return line(data); });

我之所以包装line函数是因为d3.svg.line没有保留传递给它的原始数据，参见源代码here 。但 d3 似乎不接受函数。它抛出此错误:

Error: Problem parsing d="function n(n){function a(){s.push("M",u(t(f),l))}for(var o,s=[],f=[],h=-1,d=n.length,g=c(e),p=c(r);d>++h;)i.call(this,o=n[h],h)?f.push([+g.call(this,o,h),+p.call(this,o,h)]):f.length&&(a(),f=[]);return f.length&&a(),s.length?s.join(""):null}"

我读到它需要一个路径或由 d3 辅助方法(线、区域等)生成的路径，这就是我在函数中返回的内容。我怎样才能做到这一点？我工作的方向错了吗？有不懂的地方请追问。

Answer 1

d3.svg.line 组件返回一个函数，但您需要在数据上调用该函数以获取路径字符串。尝试这样的事情:

var line = function(data) {
    var generator = d3.svg.line()
        .x(function(d,i) { ... })
        .y(function(d, i) { ...})
        .interpolate('basis');
    return generator(data);
}

D3 试图将生成器函数本身分配给 d 属性，将其强制为字符串，因此出现奇怪的错误。