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

我包装行函数的原因是因为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属性，将其强制转换为字符串，因此出现了奇怪的错误。

如何包装d3.svg.line？

1 个答案: