使用d3js恢復到使用筆刷縮放的原始圖形

我正在製作一個簡單圖形，以便使用d3js合併實時數據。在我的代碼中，我使用模擬數據來繪製圖形，所以我可以使用不同的特徵來操縱圖形。我正在開發一個筆刷縮放功能，並且我可以使用該功能，但我無法使用外部重置按鈕使圖形恢復到原始狀態。當我按下重置按鈕時，原始圖形呈現，但縮放部分也顯示出來。請幫助，因爲我對d3js非常陌生。使用d3js恢復到使用筆刷縮放的原始圖形

var heartData = [{ 
    time: 0, 
    pulse: 50 
},{ 
    time: 1, 
    pulse: 100 
},{ 
    time: 2, 
    pulse: 0 
},{ 
    time: 3, 
    pulse: -100 
},{ 
    time: 4, 
    pulse: -25 
},{ 
    time: 5, 
    pulse: 25 
},{ 
    time: 6, 
    pulse: 0 
},{ 
    time: 7, 
    pulse: 100 
},{ 
    time: 8, 
    pulse: -50 
},{ 
    time: 9, 
    pulse: 25 
},{ 
    time: 10, 
    pulse: -25 
}]; 

var w = 600; 
var h = 400; 

var svg = d3.select('svg').attr("width", w).attr('height', h); 

var x = d3.scale.linear() 
    .domain([0, 10]) 
    .range([0, w]); 

var y = d3.scale.linear() 
    .domain([-150, 150]) 
    .range([0, h]); 

var line = d3.svg.line() 
    .x(function(d) { return x(d.time); }) 
    .y(function(d) { return y(d.pulse); }); 

svg.append("path") 
     .attr("class", "line") 
     .style('stroke', 'black') 
     .style('stroke-width', '1') 
     .style('fill', 'none') 
     .datum(heartData) 
     .attr("d", line); 



// Draw transparent rectangle and zoom on mouseup 
var brush = d3.svg.brush() 
    .x(x) 
    .y(y) 
    .on("brushend", function() { 
     console.log('brush', brush.extent()); 
     var extent = brush.extent(); 
     y.domain([extent[0][1], extent[1][1]]); 
     x.domain([extent[0][0], extent[1][0]]); 
     svg.select('.line').attr("d", line); 
     brush.clear(); 
     svg.select('.brush').call(brush); 
    }); 

svg.append("g") 
    .attr('class','brush') 
    .call(brush) 
    .selectAll("rect") 
    .style('fill-opacity', 0.5) 
    .style('fill', 'red'); 

//Reset to original graph from Zoomed view 

function reset (x, y, line){ 
    x = d3.scale.linear() 
    .domain([0, 10]) 
    .range([0, w]); 

    y = d3.scale.linear() 
    .domain([-150, 150]) 
    .range([0, h]); 

    line = d3.svg.line() 
     .x(function(d) { return x(d.time); }) 
     .y(function(d) { return y(d.pulse); }); 

    svg.append("path") 
     .attr("class", "line") 
     .style('stroke', 'black') 
     .style('stroke-width', '1') 
     .style('fill', 'none') 
     .datum(heartData) 
     .attr("d", line); 
    } 

var d3Brush = this.brush; 

function clearBrush(g){ 
    d3.selectAll("g.brush").call(this.brush.clear()); 
} 


$(document).on('click','#resetbtn', function(e){ 


    e.preventDefault(); 

    reset(); 
    clearBrush(); 
});

來源

2015-10-12 kishanbhakta

您的重置函數正在重新初始化並重新繪製整個圖表。你不需要這麼做;所有你需要的是「放大還原」，然後重畫線：

function reset() { 

    x.domain([0, 10]); // reset x domain 

    y.domain([-150, 150]); // reset y domain 

    d3.select('.line') 
    .attr("d", line); // redraw line 
}

下面是完整的工作代碼：

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <button id="resetbtn">Reset</button> 
 
    <svg width="500" height="500"></svg> 
 
    <script> 
 
    var heartData = [{ 
 
     time: 0, 
 
     pulse: 50 
 
    }, { 
 
     time: 1, 
 
     pulse: 100 
 
    }, { 
 
     time: 2, 
 
     pulse: 0 
 
    }, { 
 
     time: 3, 
 
     pulse: -100 
 
    }, { 
 
     time: 4, 
 
     pulse: -25 
 
    }, { 
 
     time: 5, 
 
     pulse: 25 
 
    }, { 
 
     time: 6, 
 
     pulse: 0 
 
    }, { 
 
     time: 7, 
 
     pulse: 100 
 
    }, { 
 
     time: 8, 
 
     pulse: -50 
 
    }, { 
 
     time: 9, 
 
     pulse: 25 
 
    }, { 
 
     time: 10, 
 
     pulse: -25 
 
    }]; 
 

 
    var w = 600; 
 
    var h = 400; 
 

 
    var svg = d3.select('svg').attr("width", w).attr('height', h); 
 

 
    var x = d3.scale.linear() 
 
     .domain([0, 10]) 
 
     .range([0, w]); 
 

 
    var y = d3.scale.linear() 
 
     .domain([-150, 150]) 
 
     .range([0, h]); 
 

 
    var line = d3.svg.line() 
 
     .x(function(d) { 
 
     return x(d.time); 
 
     }) 
 
     .y(function(d) { 
 
     return y(d.pulse); 
 
     }); 
 

 
    svg.append("path") 
 
     .attr("class", "line") 
 
     .style('stroke', 'black') 
 
     .style('stroke-width', '1') 
 
     .style('fill', 'none') 
 
     .datum(heartData) 
 
     .attr("d", line); 
 

 
    // Draw transparent rectangle and zoom on mouseup 
 
    var brush = d3.svg.brush() 
 
     .x(x) 
 
     .y(y) 
 
     .on("brushend", function() { 
 
     console.log('brush', brush.extent()); 
 
     var extent = brush.extent(); 
 
     y.domain([extent[0][1], extent[1][1]]); 
 
     x.domain([extent[0][0], extent[1][0]]); 
 
     svg.select('.line').attr("d", line); 
 
     brush.clear(); 
 
     svg.select('.brush').call(brush); 
 
     }); 
 

 
    svg.append("g") 
 
     .attr('class', 'brush') 
 
     .call(brush) 
 
     .selectAll("rect") 
 
     .style('fill-opacity', 0.5) 
 
     .style('fill', 'red'); 
 

 
    //Reset to original graph from Zoomed view 
 

 
    function reset() { 
 
     x.domain([0, 10]); 
 

 
     y.domain([-150, 150]); 
 

 
     d3.select('.line') 
 
     .attr("d", line); 
 
    } 
 

 
    var d3Brush = this.brush; 
 

 
    function clearBrush(g) { 
 
     d3.selectAll("g.brush").call(this.brush.clear()); 
 
    } 
 

 

 
    d3.select('#resetbtn').on('click', function(e) { 
 

 

 
     d3.event.preventDefault(); 
 

 
     reset(); 
 
     clearBrush(); 
 
    }); 
 
    
 
    </script> 
 
    </body> 
 

 
</html>

來源

2015-10-12 17:49:18 Mark

真誠地感謝您。 – kishanbhakta

正是我在找的東西。謝謝。 – Vedant261

使用d3js恢復到使用筆刷縮放的原始圖形

回答

相關問題