Как увеличить поведение в линейной диаграмме с помощью d3.js

Question

Я разработал для кода линейного графа, но не смог изменить масштаб поведения для данного кода, как добавить для увеличения линейного графика, я попытался изменить масштаб , но не смог показать масштабирование линейного графика, данные, которые я разработал.

     function draw(){ 

       var s1=data.map(function (d,i){return {key:d.key[0],value:d.value}}) 
        //console.log(s1); 
       var margin = {top: 15, right: 20, bottom: 70, left: 85}, 
        width = 440,height = 450; 
       var parseDate = d3.time.format("%y").parse 
       var x = d3.time.scale().range([0, width]); 
       var y = d3.scale.linear().range([height, 0]); 

       var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(7).tickFormat(d3.format("d")); 

       var yAxis = d3.svg.axis().scale(y).orient("left") 

       var area = d3.svg.area() 
       .interpolate("cardinal") 
       .x(function(d) { return x(d.key); }) 
       .y0(y(0)) 
       .y1(function(d) { return y(d.value); }); 

       var line = d3.svg.line() 
       .x(function(d) { return x(d.key); }) 
       .y(function(d) { return y(d.value); }) 
       .interpolate("cardinal") 

       var div = d3.select("body") 
       .append("div") 
       .attr("class", "tooltip")    
       .style("opacity", 0); 

       var svg = d3.select("body").select("#lineCharts") 
       .attr("width", width + margin.left + margin.right) 
       .attr("height", height + margin.top + margin.bottom) 
       .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
       x.domain(d3.extent(s1, function(d) { return d.key; })); 
       y.domain(d3.extent(s1, function(d) { return d.value; })); 
       var zoom = d3.behavior.zoom() 
       .on("zoom", drawZoom); 
       svg.append("g") 
       .attr("class", "x axis x-axis") 
       .attr("transform", "translate(0," + height + ")").attr("fill","steelblue") 
       .call(xAxis); 
       svg.append("path") 
       .datum(s1) 
       .attr("class", "area") 
       .attr("d", area); 
       svg.append("g").attr("class", "y axis y-axis").attr("fill","steelblue").call(yAxis) 

       svg.append("path").attr("class", "line").attr("d", line(s1)); 
       svg.selectAll("dot") 
       .data(data) 
       .enter().append("circle") 
       .style("fill","blue") 
       .attr("r","3.5") 
       .attr("cx",function (d,i){return x(d.key);}) 
       .attr("cy",function(d,i){return y(d.value);}) 
       .on("mouseover", function(d) {  
         div.transition()   
          .duration(200)  
          .style("opacity", .9);  
         div .html((d.key) + "<br/>" + d.value) 
          .style("left", (d3.event.pageX) + "px")  
          .style("top", (d3.event.pageY-28) + "px");  
         })     
        .on("mouseout", function(d) {  
         div.transition()   
          .duration(500)  
          .style("opacity", 0); 
        }); 
     function drawZoom() { 
      svg.select("g.x axis x-axis").call(xAxis); 
      svg.select("g.y axis y-axis").call(yAxis); 
      svg.select("path.area").attr("d", area); 
      svg.select("path.line").attr("d", line(s1)); 
      } 
       } 

Answer 1

Попробуйте это, может быть?

{//-------------------------zoom 
     var minZoom = 0.2, 
     maxZoom = 2.5; 
     var zoom = d3.behavior.zoom() 
     .on("zoom", redraw) 
     .scaleExtent([minZoom, maxZoom])//-call zoom but put scale extent on to limit zoom in/out 
     ; 
    } 

    function redraw() //-redraw 
    { 
     var trans=d3.event.translate; 
     var scale=d3.event.scale; 
     //var newScale = scale/2; 
     inner.attr("transform","translate(" + trans + ")" + " scale(" + scale + ")"); //-translates and scales 
    } 

вызовов, что на вашем фоне (SVG) и использовать мышь для панорамирования и масштабирования :)