带日期的D3平移图表

我试图获得一个基于多行日期的图表，以便在X日期轴上很好地平移，我根本无法弄清楚问题是什么。

我在代码中设置了缩放行为，但它没有按预期执行。 如果单击一行中的一个点并滚动它似乎是滚动轴，如果它单击轴上的标签它也会滚动但实际的数据可视化不会滚动。

var zoom = d3.behavior.zoom() .x(x) .scaleExtent([1, 1]) .on("zoom", function () { svg.select(".x.axis").call(xAxis); svg.select(".lines").call(xAxis); }); svg.call(zoom); 

此外，如果您直接点击背景，鼠标事件似乎根本不会让它完全通向控件。

我在这里读了几个例子，每个人都采用了一种截然不同的方法，我已经尝试过，但没有一个方法可以用于我的图表。

可能存在许多问题作为使这种工作成为障碍，因此我认为解释问题的最佳方式是在JsFiddle中。

D3图表平移小提琴

我想要实现的是当有大量数据可视化时，图表可以适应数据集并允许数据超出图表的范围。

Answer 1

当前单击背景不允许平移，因为您已将缩放行为应用于g元素而不是svg。

 var svg = d3.select('#host') .data(plotData) .append("svg") .attr("id", "history-chart") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .call(zoom); 

现在，在缩放时，您已更新了x和y轴，但未更新可视化。 所以你也像这样更新了线条和圆圈。

 var zoom = d3.behavior.zoom() .x(x) .scaleExtent([1, 1]) .on("zoom", function () { svg.select(".x.axis").call(xAxis); svg.select(".lines").call(xAxis); svg.selectAll("path.lines") .attr("d", function(d) { return line(d.values); }); svg.selectAll("circle") .attr("cx", function(d) { return x(d.date); }) .attr("cy", function(d) { return y(d.value); }); }); 

由于您要平移地图，因此必须使用剪辑路径来限制可视化移动到图表外部

 var clip = svg.append("svg:clipPath") .attr("id", "clip") .append("svg:rect") .attr("x", 0) .attr("y", 0) .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); 

将剪辑路径应用于包含线条和cicrles的元素。

  var attribute = svg.selectAll(".attribute") .data(plotData) .enter().append("svg:g") .attr("clip-path", "url(#clip)") .attr("class", "attribute");