D3日期平移图表

Question

我想要得到一个多行日期图表，在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 Chart Panning Fiddle

我试图做到的，是当有大量的数据可视化图表可以适应数据集，并允许数据超出图表的界限的。

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

外应用夹路径克elment包含线和cicrles限制可视化。

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