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）上调用它并使用鼠标进行平移和缩放：）

如何使用d3.js缩放折线图中的行为

1 个答案: