Применить масштабирование и масштабирование оси в d3

Question

Я создал разбросанную диаграмму в D3. Он работает нормально, но у меня есть требование добавить масштабирование и масштабирование оси к диаграмме.

Поскольку я довольно много нового для d3, я не могу этого сделать. Я видел пример, но я могу применить код масштабирования, панорамирования и т. Д. В моей диаграмме.

Вот мой код-

var margin = { 
     top: 35, 
     right: 10, 
     bottom: 40, 
     left: 80 
    }, 
    width = width - margin.left - margin.right, 
    height = height - margin.top - margin.bottom; 

    var xValue = function(d){ 
     return d[measureArray[1]]; 
    }, 
    x = d3.scale.linear() 
    .range([0, width*.98]), 
    xMap = function(d,i) { 
     return x(xValue(d)); 
    }, 
    make_x_axis = function() { 
     return d3.svg.gridaxis() 
     .scale(x) 
     .orient("bottom") 
     }, 

    xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .tickFormat(function(d) { 

     return d; 

    }); 

    var yValue = function(d){ 
     return d[measureArray[0]]; 
    }, 
    y = d3.scale.linear() 
    .range([height*.98, 0]), 
    yMap = function(d,i){ 
     return y(yValue(d)); 
    }, 
    make_y_axis = function() { 
     return d3.svg.gridaxis() 
     .scale(y) 
     .orient("left") 
    }, 
    yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickFormat(function(d) { 
     //  if(typeof displayY !=="undefined" && displayY =="Yes"){ 
     //   if(yAxisFormat==""){ 
     return d; 

    }); 

    var zValue = function(d){ 
     return d[measureArray[2]]; 
    }, 
    zScale = d3.scale.linear() 
    .range([height*.98, 0]), 
    zMap = function(d) { 
     return zScale(zValue(d)); 
    }; 

    var color = d3.scale.category10(); 

var svg = d3.select("body") .append("svg") 
      .attr("id", "svg_" + div) 
      .attr("viewBox", "0 0 "+(width + margin.left + margin.right)+" "+(height + margin.top + margin.bottom+ 17.5)+" ") 
      .classed("svg-content-responsive", true) 
    .append("g") 
    .attr("transform", "translate(" + (margin.left*.7) + "," + (margin.top+3) + ")"); 

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

    data.forEach(function(d) { 
     d[measureArray[2]] = +d[measureArray[2]] 
    d[measureArray[1]] = +d[measureArray[1]]; 
    d[measureArray[0]] = +d[measureArray[0]]; 
    }); 

    x.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]); 
    y.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]); 
// } 

    if(typeof chartData[divId]["displayX"]!="undefined" && chartData[divId]["displayX"]!="" && chartData[divId]["displayX"]!="Yes"){}else{ 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
    .append("text") 
     .attr("class", "label") 
     .attr("x", width) 
     .attr("y", -6) 
     .style("text-anchor", "end") 
     .text(measureArray[1]); 
} 
    // y-axis 
    if(typeof chartData[divId]["displayY"]!="undefined" && chartData[divId]["displayY"]!="" && chartData[divId]["displayY"]!="Yes"){}else{ 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("class", "label") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text(measureArray[0]); 
} 
    var max = maximumValue(data, measureArray[2]); 
    var min = minimumValue(data, measureArray[2]); 
    var temp = {}; 

    temp["min"] = min; 
    temp["max"] = max; 
    svg.selectAll(".circle") 
     .data(data) 
    .enter().append("circle") 

     .attr("index_value", function(d, i) { 
       return "index-" + d[columns[1]].replace(/[^a-zA-Z0-9]/g, '', 'gi'); 
      }) 
      .attr("class", function(d, i) { 
       return "bars-Bubble-index-" + d[columns[1]].replace(/[^a-zA-Z0-9]/g, '', 'gi')+div; 
      }) 
    .attr("r", function(d,i){ 

//  var scale = d3.scale.linear().domain([temp["max"], temp["min"]]).range(["38", "12"]); 
//  var radius = scale(data[i][measureArray[2]]); 
     return 6; 
    }) 
    .attr("cx", xMap) 
    .attr("cy", yMap) 
    .attr("opacity",".6") 
      .attr("fill", 'red') 


    .attr("id",function(d,i) { 
     return d[columns[0]]+":"+d[columns[1]]; 
    }) 

    .attr("onclick", fun); 

Работа fiddle.

Answer 1

Вы можете сделать это следующим образом:

//define zoom behavior 
var zoom = d3.behavior.zoom() 
    .on("zoom", draw); 


//make a rectangle for receiving all the zoom/pan action. 

svg.append("rect") 
    .attr("class", "pane") 
    .attr("width", width) 
    .attr("height", height) 
    .call(zoom); 

//make a clip path so that the circle don't go out of the graph. 
svg.append("clipPath") 
    .attr("id", "clip") 
    .append("rect") 
    .attr("x", x(0)) 
    .attr("y", y(1)) 
    .attr("width", x(1) - x(0)) 
    .attr("height", y(0) - y(1)); 

Добавьте следующий класс в стиле (так что панели прямоугольник не виден) примечание: что заливка не ни:

rect.pane { 
    cursor: move; 
    fill: none; 
    pointer-events: all; 
} 

После определения домена, установите зум х и у

x.domain([d3.min(data, xValue) - 1, d3.max(data, xValue) + 1]); 
y.domain([d3.min(data, yValue) - 1, d3.max(data, yValue) + 1]); 
// set the zoom for x and y 
zoom.x(x); 
zoom.y(y); 

Сделать группу для всех окружности так, что его в clippath

circlegroup = svg.append("g").attr("clip-path", "url(#clip)"); 
circlegroup.selectAll(".circle")... 

Определим функцию отрисовки, которая будет называться на масштабирование и панорамирование:

function draw() { 
    svg.select("g.x.axis").call(xAxis);//zoom of x axis 
    svg.select("g.y.axis").call(yAxis);//zoom of y axis 
    //update the position of the circle on zoom/pan 
    svg.selectAll("circle").attr("cx", xMap) 
    .attr("cy", yMap) 
} 

рабочего кода here