如何用d3縮放

Question

我正在用d3繪製一個簡單的條形圖，並且我有一個x軸設置並設置了畫筆，以便我可以刷「選擇」一組小節。然後，我想鑽取並縮放圖表以僅包含這些條。下面的代碼工作，刷子內部和感動的酒吧的顏色變成正確的顏色，但我不能讓事情變焦。

我看了這個：http://bl.ocks.org/mbostock/1667367和一堆其他的東西，只是無法弄清楚。

Here is a fiddle, can someone show me how to simply zoom the darn thing?

var brush; 

function go3() 
{ 
    var dataset = []; 
    var m = 40; 
    var count = 500; 
    dataset.push(m); 
    for (var i = 0; i < 150; i++) {   //Loop 25 times 
     var newNumber = Math.random() * m; //New random number (0-30) 
     dataset.push(newNumber);    //Add new number to array 
    } 

    margin = {top: 10, right: 10, bottom: 30, left: 10}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom 


    w = width; 
    h = height; 

    yScale = d3.scale.linear().domain([0, d3.max(dataset)]).range([0, h * .95]); 
    xScale = d3.scale.linear() 
     .range([0, w]) 
     .domain([0, w]); 
    var xAxis = d3.svg.axis().scale(xScale).orient("bottom"); 

    console.log("Max: " + d3.max(dataset)); 

    svg = d3.select("body") 
     .append("svg") 
     .attr("width", w + margin.left + margin.right) 
     .attr("height", h + margin.top + margin.bottom) 
    ; 

    svg.append("rect") 
     .attr("stroke", "grey") 
     .attr("stroke-width", 1) 
     .attr("width", w + margin.left + margin.right) 
     .attr("height", h + margin.top + margin.bottom) 
     .attr("fill", "#FFFFFF") 
     .classed("main-container", true); 

    svg.append("rect") 
     .attr("width", w) 
     .attr("height", h) 
     .attr("stroke", "grey") 
     .attr("stroke-width", 0) 
     .attr("fill", "#EEFFEE") 
     .attr("x", margin.left) 
     .attr("y", margin.top) 
     .classed("brushable-container", true) 
    ; 

    xAxisGroup = svg.append("g") 
     .attr("transform", "translate(" + margin.left + "," + (h + margin.top) + ")") 
     .call(xAxis) 

    padding=2; 

    rects = svg.append("g").selectAll(".brushable") 
     .data(dataset) 
     .enter() 
     .append("rect") 
     .classed("brushable", true); 


    brush = d3.svg.brush() 
     .x(xScale) 
     .on("brush", brushmove) 
     .on("brushend", brushend); 

    context = svg.append("g") 
     .attr("class", "context") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .attr("class", "brush") 
     .call(brush) 
     .selectAll('rect') 
     .attr('height', h); 

    barWidth = w/dataset.length; 
    console.log("Width: " + barWidth); 
    rects 
     .attr("width", 4) 
     .attr("height", function(d, i){ return yScale(d)}) 
     .attr("stroke", "yellow") 
     .attr("stroke-width", .3) 
     .attr("x", function(d, i){ return (i * barWidth + margin.left) }) 
     .attr("y", function(d, i){ return h - yScale(d) + margin.top}) 
    ; 
} 

function brushend(){ 
    var extent = brush.extent(); 
    var min = extent[0] >= extent[1] ? extent[1] : extent[0]; 
    var max = extent[0] >= extent[1] ? extent[0] : extent[1]; 

    var lolobb = d3.selectAll("rect.brushable"); 
    var lob = lolobb[0]; 
    console.log(min + " - " + max); 
    var i = 0; 
    while(i < lob.length){ 
     var bbb = lob[i]; 
     try { 
      var p = parseFloat(bbb.attributes.x.value); 
      if(min <= p && max >= p) { 
       d3.select(bbb).attr("fill", "#00FF00"); 
      } else { 
       d3.select(bbb).attr("fill", "#000000"); 
      } 
      i++; 
     } catch(r) { 
      console.log("BBB"); 
      console.log(bbb); 
      console.log("Error with " + i); 
      console.log(typeof(bbb)); 
      console.log(r); 
     } 
    } 
    console.log(min + " - " + max); 
    console.log(lolobb); 
} 

function brushmove() { 
    var extent = brush.extent(); 
} 

Answer 1

您可以通過添加調用"body"一個zoom功能做到這一點，你可以通過做這樣做：

svg = d3.select("body") 
    .append("svg") 
    .attr("width", w + margin.left + margin.right) 
    .attr("height", h + margin.top + margin.bottom) 
    .append("g") 
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom)) 
; 

的變焦部是：

.append("g") 
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom)) 

然後添加zoom()函數：

function zoom() { 
    svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); 
} 

Here is a Fiddle Example。使用滾輪進行縮放。