D3ズームは軸にのみ影響し、データには影響しません

Question

私はd3ライブラリで新しく、何らかのテストを行っています。 4象限の散布図があり、ズームを適用しようとしています。軸の変更のスケールをズームすると、データの位置は変更できません。

ここでコード：

//-----------------------------------CREAR GRAFICO SCATTER (sin nada en especial)------------------------------------- 
      //Alto y ancho 
      var w = 500; 
      var h = 500; 
      var padding = 0; 

      var maxx = 0.30 
      var minx = -0.30 
      var maxy = 6 
      var miny = -6 
      //Static dataset 
      var dataset = [ 
          [0.12, 4], [0.05, 3], [0.15, -3], [-0.20, -5], [-0.10, 3] 
          ]; 

      //Funciones de escala 
      var xScale = d3.scaleLinear() 
           .domain([minx, maxx]) 
           .range([padding, h]); 

      var yScale = d3.scaleLinear() 
           .domain([miny, maxy]) 
           .range([h, padding]); 

      var rScale = d3.scaleLinear() 
           .domain([0, d3.max(dataset, function(d) { return d[1]; })]) 
           .range([2, 6]); 

      //Eje x 
      var xAxis = d3.axisBottom() 
       .scale(xScale);; 

      //Eje y 
      var yAxis = d3.axisLeft() 
       .scale(yScale); 

      //Crear el elemento svg 
      var svg = d3.select("#linegraph") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h); 




      //Colores 
      var c1 = svg.append("rect") 
       .attr("width", (w/2) - padding)    
       .attr("height", (h/2)- padding) 
       .attr("transform", "translate("+padding+","+padding+")") 
       .attr("fill", "yellow"); 

      var c2 = svg.append("rect") 
       .attr("width", (w/2) - padding)    
       .attr("height", (h/2)- padding) 
       .attr("transform", "translate("+w/2+","+padding+")") 
       .attr("fill", "green"); 

      var c3 = svg.append("rect") 
       .attr("width", (w/2) - padding)    
       .attr("height", (h/2)- padding) 
       .attr("transform", "translate("+padding+","+h/2+")") 
       .attr("fill", "red"); 

      var c4 = svg.append("rect") 
       .attr("width", (w/2) - padding)    
       .attr("height", (h/2)- padding) 
       .attr("transform", "translate("+w/2+","+h/2+")") 
       .attr("fill", "orange"); 

      //Añadimos el eje x 
      var gX = svg.append("g") 
       .attr("class", "axis") 
       .attr("transform", "translate(0," + (h/2) + ")") 
       .call(xAxis); 

      //Añadimos el eje y 
      var gY = svg.append("g") 
       .attr("class", "axis") 
       .attr("transform", "translate(" + (w/2) + ",0)") 
       .call(yAxis); 

      //Creamos los puntos 
      var datos = svg.selectAll("circle") 
       .data(dataset) 
       .enter() 
       .append("circle") 
       .attr("cx", function(d) { 
        return xScale(d[0]); 
       }) 
       .attr("cy", function(d) { 
        return yScale(d[1]); 
       }) 
       .attr("r", function(d) { 
        return 5; 
       }); 


//--------------------------------- ZOOM---------------------------------------------------------------------    
      var zoom = d3.zoom() 
       .scaleExtent([1, 40]) 
       .translateExtent([[-100, -100], [w + 90, h + 100]]) 
       .on("zoom", zoomed); 

      svg.call(zoom); 
      function zoomed() { 
       svg.attr("transform", d3.event.transform); 
       gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale))); 
       gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));       
      } 

これは、ズームなしのプロットである：あなたが見ることができるように

：ズームと

そして、これデータポイントと象限ズームには影響しませんが、軸のスケールには影響しません。

Answer 1

の試みを：

datos.attr("transform",d3.event.transform) 

ズーム機能は、次のようなものです：

 var zoom = d3.zoom() 
      .scaleExtent([1, 40]) 
      .translateExtent([[-100, -100], [w + 90, h + 100]]) 
      .on("zoom", zoomed); 

     svg.call(zoom); 
     function zoomed() { 
      svg.attr("transform", d3.event.transform); 
      gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale))); 
      gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));   
      datos.attr("transform",d3.event.transform) 
     } 

Answer 2

あなたはattr svg transformのため、g=svg.append("g")を試してからgを追加してください。この行を追加するズーム機能g.attr("transform",d3.event.transform)