如何包装d3.svg.line

Question

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

我不想为这些参数重新加载整个图表，所以我一直在尝试操作路径，但我被卡住了，因为我还需要获得每个路径的原始数据来重建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没有保留传递给它的原始数据，请参阅此处的源代码。但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属性，将其强制为字符串，因此出现了奇怪的错误。