如何在y域更改後連線路徑/圖表重繪

Question

我想在同一個可視化中繪製多個barcharts。

繪製第一個條形圖時，它對第二個，第三個等的域沒有任何意義。在繪製第二個條形圖時，y比例的域會改變。因此，第一個條形圖需要重新繪製。問題是什麼是連接重繪的好方法，因爲比例/域沒有更改通知機制。

http://bl.ocks.org/markfink/4d8f1c183e6cd9d6ea07

Answer 1

這裏有一個實現：http://jsfiddle.net/tBHyD/2/

我只是試圖解決問題的設置，而不是全面實施您的評論指出。有很多方法可以做到這一點;這一個使用事件驅動模型，採用d3.dispatch：

var evt = d3.dispatch("change"); 

這裏的關鍵是在全球範圍內更新的規模程度，那麼如果他們已經改變了觸發事件。這裏我用一個函數，updateExtent，爲了這個目的：

var x0 = Infinity, 
     x1 = -Infinity, 
     y0 = Infinity, 
     y1 = -Infinity; 
    function updateExtent(data) { 
     var extx = d3.extent(data, function(d) { return d[0]; }), 
      exty = d3.extent(data, function(d) { return d[1]; }), 
      changed; 
     // update 
     if (extx[0] < x0) { x0 = extx[0]; changed = true; } 
     if (extx[1] > x1) { x1 = extx[1]; changed = true; } 
     if (exty[0] < y0) { y0 = exty[0]; changed = true; } 
     if (exty[1] > y1) { y1 = exty[1]; changed = true; } 
     // if changed, update scales and fire event 
     if (changed) { 
      // update scales 
      x.domain([x0, x1]); 
      y.domain([y1, y0]); 
      // update axes 
      vis.select(".x.axis").call(xAxis); 
      vis.select(".y.axis").call(yAxis); 
      // fire event 
      evt.change(); 
     } 
    } 

然後redraw函數設置監聽器：

function redraw(selection, data, style) { 
     var bar = selection.selectAll(".bar") 
      .data(data); 

     // enter 
     bar.enter().append("rect") 
      .attr('class', "bar") 
      .attr("width", 5) 
      .style(style); 

     function updateBar() { 
      // update 
      bar 
       .attr("x", function(d) { return x(d[0]) - .5; }) 
       .attr("y", function(d) { return y(d[1]); }) 
       .attr("height", function(d) { return height - y(d[1]); }); 
     } 
     // initial call 
     updateBar(); 
     // handler call 
     evt.on("change", updateBar); 
    }; 

注意，現在你不需要明確設置範圍：

var data1 = [[2,0.5], [4,0.8], [6,0.6], [8,0.7], [12,0.8]]; 
    updateExtent(data1);