Question

我想用d3.js v4实现语义缩放。 Stackoverflow上的大多数示例和问题都适用于v3。所以我试图改变其中一个，比如answer。答案示例：bl.ocks.org example

我试图熟练使用d3 v4的例子：

var xOld, yOld;

var width = document.querySelector('body').clientWidth,
    height = document.querySelector('body').clientHeight;

var randomX = d3.randomNormal(width / 2, 80),
    randomY = d3.randomNormal(height / 2, 80);

var data = d3.range(2000).map(function() {
  return [
    randomX(),
    randomY()
  ];
});

var xScale = d3.scaleLinear()
    .domain(d3.extent(data, function (d) {
      return d[0];
    }))
    .range([0, width]);

var yScale = d3.scaleLinear()
    .domain(d3.extent(data, function (d) {
      return d[1];
    }))
    .range([0, height]);

var xExtent = xScale.domain();
var yExtent = yScale.domain();

var zoomer = d3.zoom().scaleExtent([1, 8]).on("zoom", zoom);

var svg0 = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

    var svg = svg0.append('g') 
    .attr("width", width)
    .attr("height", height)




var circle = svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", transform_);


    svg0
    .call(zoomer)
    .call(zoomer.transform, d3.zoomIdentity);

function zoom(e) {

    var transform = d3.zoomTransform(this);

    var x = 0;
    var y = 0;
    if(d3.event.sourceEvent) {

      var x = d3.event.sourceEvent.layerX;
      var y = d3.event.sourceEvent.layerY;

    }
    var scale =  Math.pow(transform.k, .8);

    xScale = d3.scaleLinear()
                .domain([xExtent[0], xExtent[1] / scale])
                .range([0, width]);
    yScale = d3.scaleLinear()
                .domain([yExtent[0], yExtent[1] / scale])
                .range([0, height]);

    circle.attr('transform', transform_)
    svg.attr("transform", "translate(" + d3.event.transform.x + "," + d3.event.transform.y + ")");
}

function transform_(d) {
  var x = xScale(d[0]);
  var y = yScale(d[1]);

  return "translate(" + x + "," + y  + ")";
}

变焦本身很有效 - 基本上。像普通的缩放一样，它应该缩放到鼠标指针的位置，它没有。平移也看起来有些不顺畅。

我尝试使用d3.event.sourceEvent中的鼠标位置作为翻译的偏移量，但它没有用。

那么，变焦如何使用鼠标位置？获得更平滑的平移手势也很棒。

Answer 1

    The zoom on mouse pointer can be added using pointer-events attribute.
    Also, I have an example for a semantic zoom for d3 version 4 with the mouse pointer and click controls and also displaying the scale value for reference.[enter link description here][1]

        var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

var randomX = d3.randomNormal(width / 2, 80),
  randomY = d3.randomNormal(height / 2, 80),
  data = d3.range(20).map(function() {
    return [randomX(), randomY()];
  });
var scale;
console.log(data);
var circle;


var _zoom = d3.zoom()
  .scaleExtent([1, 8])
  .on("zoom", zoom);


circle = svg.selectAll("circle")
  .data(data)
  .enter().append("circle")
  .attr("r", 5)
  .attr("transform", transform(d3.zoomIdentity));


svg.append("rect")
  .attr("fill", "none")
  .attr("pointer-events", "all")
  .attr("width", width)
  .attr("height", height)
  .call(_zoom);

function zoom() {
  circle.attr("transform", transform(d3.event.transform));
  scale = d3.event.transform.k;
  console.log(scale);
  document.getElementById('scale').value = scale;
}

function transform(t) {
  return function(d) {
    return "translate(" + t.apply(d) + ")";
  }
}



var gui = d3.select("#gui");
gui.append("span")
  .classed("zoom-in", true)
  .text("+")
  .on("click", function() {
    _zoom.scaleBy(circle, 1.2);
  });
gui.append("span")
  .classed("zoom-out", true)
  .text("-")
  .on("click", function() {
    _zoom.scaleBy(circle, 0.8);
  });    

please find the link to fiddle: 

[1]: https://jsfiddle.net/sagarbhanu/5jLbLpac/3/

语义缩放和平移d3.js v4

1 个答案: