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