變化與規模d3.js

Question

我想更改圖形由d3.js.呈現規模

這是什麼，我想出了一個摘錄（上Plunker整個代碼，見下文）：

var toggleZoom = function() { 
    switch(state) { 
    case 'zoomed_in': 
    state = 'zoomed_out'; 
    scaleX = d3.scale.linear().rangeRound([0, width]).domain([min_out, max_out]); 
    break; 
    case 'zoomed_out': 
    state = 'zoomed_in'; 
    scaleX = d3.scale.linear().rangeRound([0, width]).domain([min_in, max_in]); 
    break; 
    } 
    update(); // uses scaleX to render the graph 
} 

雖然這initialy使得以預期的方式曲線圖，它拒絕做出的任何改變圖表上面的功能的後續調用。

我想這是不是d3.js'做它的風格。什麼會是更有希望的方法？

我也看了成D3的縮放行爲，但似乎並沒有在這種情況下，一個不錯的選擇，因爲這是真的只有去鱗之間的切換隻在一個軸上。

這是一起玩周圍的Plunker：http://plnkr.co/edit/3qoQoSerohiC9xFAuXyI

Answer 1

您實際上並不重畫圖表。您正在操作只有輸入選擇，爲rect元素已經存在，這將是在後續調用空。要修復，請處理更新選項以及：

var sel = svg.selectAll('rect').data(data); 
sel 
.enter().append('rect'); 
sel 
.attr('x', function(d) { return scaleX(d.p) }) 
.attr('width', function(d) { return scaleX(d.p+d.l)-scaleX(d.p) }) 
.attr('height', height) 
.attr('fill', function(d) { return d.c }); 

完整演示here。