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

z0qdvdin 于 2023-03-28 发布在 Java

关注(0)|答案(2)|浏览(122)

我一直试图将此代码升级到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-只作为几何缩放工作。
MikeBostock的SVG几何和语义缩放示例在d3 v3中对我很有用，但是由于zoom.x（）和zoom.y（）函数被删除了，我就不知道该怎么办了。

JavaScript

来源：https://stackoverflow.com/questions/44306700/zooming-and-panning-upgrading-d3-code-to-d3-v4

2条答案

按热度按时间

roejwanj1#

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重新缩放它们的半径。

赞(0）回复(0）举报 2023-03-28

busg9geu2#

我有一个例子小提琴语义缩放d3版本4与点击控制，也显示规模的参考。
您可以使用这个尺度来添加相同的任何语义信息。

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

下面是JS fiddle链接：
https://jsfiddle.net/sagarbhanu/5jLbLpac/36/

赞(0）回复(0）举报 2023-03-28

我来回答

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

2条答案

相关问题

热门标签

最新问答