Question

我一直试图将此代码升级到d3的v4而没有运气。

function xnr(selector) {
var coordinates = [
                        {"id": 1, "x": 120.16353869437225, "y": 160.974180892502466},
            {"id": 2, "x": 190.285414932883366, "y": 259.116836781737214},
            {"id": 3, "x": 310.218762385111142, "y": 170.033297729284202}
            ];

var x = d3.scale.linear()
    .domain([0, 100])
    .range([0, 100]);

var y = d3.scale.linear()
    .domain([0, 100])
    .range([0, 100]);

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

var svg = d3.select(selector).append("svg:svg")
    .attr("width", 400)
    .attr("height", 400)
    .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 100]).on("zoom", zoom));

var groups = svg.selectAll("g.leaf")
    .data(coordinates)
    .enter()
    .append("svg:g")
    .attr("class", "leaf")
    .attr("transform", transform)
    .append("svg:circle")
    .attr("r", 5)
    .attr('stroke', '#aaaaaa')
    .attr('stroke-width', '2px');

function zoom() {
    svg.selectAll("g.leaf").attr("transform", transform);
}

function transform(d) {
    return "translate(" + x(d.x) + "," + y(d.y) + ")";
}
}

旧代码jsfiddle - 按需要工作（语义缩放）。新代码jsfiddle - 仅适用于几何缩放。

Mike Bostock的SVG几何和语义缩放示例在d3 v3中为我工作，但由于zoom.x（）和zoom.y（）函数已被删除，我迷失了。

Answer 1

Mike Bostock的Pan & Zoom III示例可以修改为按照jsfiddle使用语义缩放。重要的一点是：

var radius = 3;
var circles = g.selectAll("circle")
    .data(points)
  .enter().append("circle")
    .attr("cx", function(d) { return d[0]; })
    .attr("cy", function(d) { return d[1]; })
    .attr("r", radius);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "none")
    .style("pointer-events", "all")
    .call(d3.zoom()
        .scaleExtent([1 / 2, 4])
        .on("zoom", zoomed));

function zoomed() {
    var transform = d3.zoomTransform(this);
    circles.attr("transform", transform);
    circles.attr("r", radius/transform.k)
}

zoomTransform是平面的线性变换，随着距离的增加会增加面积。如果我们希望在缩放后圆圈具有相同的区域，我们需要通过变换的比例因子transform.k重新缩放它们的半径。

Answer 2

    I have an example fiddle for semantic zoom for d3 version 4 with click controls. also displaying scale for the reference. you can use this scale to add any semantic information for the same.

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(200).map(function() {
    return [randomX(), randomY()];
  });
var scale;

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


// semantic zoom

function semanticZoom() {
  circle.attr("transform", transform(d3.event.transform));
}

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

    below is the js fiddle link:

    https://jsfiddle.net/sagarbhanu/5jLbLpac/36/

缩放和平移 - 将d3代码升级到d3.v4

2 个答案: