在 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);

工作小提琴。

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));

將以下類添加到樣式（以便矩形窗格不可見）注意：填充為none ：

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

定義域后，設置縮放x和y

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);

為所有圓圈創建一個組，使其在剪輯路徑內

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)
}

工作代碼在這里