Question

我在svg中有一个D3.js绘图，我希望能够平移和缩放它。我还想在初始窗口周围绘制一个矩形。我希望矩形在我缩小时变小，在我放大时变大，在我平移时正常移动。通常的东西。

我还希望能够重新绘制矩形以使其再次适合实际窗口（因此，如果我在重绘之间放大，它将小于第一个）。我没有在代码示例中包含此部分，但它解释了为什么我需要一种获取缩放属性的方法。

为了正确追踪矩形，我找到了zoom.translate（）和zoom.scale（）属性，它应该为我提供计算矩形部分坐标所需的参数。然而，由于我将这部分添加到我的代码中，平移灵敏度随着我放大和缩小而变化：我放大的越多，平移越不明智，我缩小的越多，它变得越明智。

在我看来，zoom.translate（）和zoom.scale（）只能获取参数，而不是改变缩放和平移工作的方式，我该如何解决？

我还有一个莫名其妙的不适合窗户的矩形：它有点大而且更短。

这是我的代码：

var svg;
var map;
var zoom;
var graph = d3.select("#graph");

zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .on("zoom", function () {
        svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
    });
svg = graph.append("svg")
    .attr("width",window.innerWidth)
    .attr("height",window.innerHeight)
    .call(zoom);
map = svg.append("g");

这是矩形坐标的采集：

var w_b = {
    x_min: (0 - zoom.translate()[0])/zoom.scale(),
    x_max: (svg.attr("width") - zoom.translate()[0])/zoom.scale(),
    y_min: (0 - zoom.translate()[1])/zoom.scale(),
    y_max: (svg.attr("height") - zoom.translate()[1])/zoom.scale()

这是矩形的绘图：

map.selectAll("line").remove();
map.append("line").attr("x1", w_b['x_min']).attr("x2", w_b['x_max']).attr("y1", w_b['y_min']).attr("y2", w_b['y_min'])
    .attr("stroke-width", 1).attr("stroke", "black");
map.append("line").attr("x1", w_b['x_min']).attr("x2", w_b['x_max']).attr("y1", w_b['y_max']).attr("y2", w_b['y_max'])
    .attr("stroke-width", 1).attr("stroke", "black");
map.append("line").attr("x1", w_b['x_min']).attr("x2", w_b['x_min']).attr("y1", w_b['y_min']).attr("y2", w_b['y_max'])
    .attr("stroke-width", 1).attr("stroke", "black");
map.append("line").attr("x1", w_b['x_max']).attr("x2", w_b['x_max']).attr("y1", w_b['y_min']).attr("y2", w_b['y_max'])
    .attr("stroke-width", 1).attr("stroke", "black");

作为一个额外的问题，这在Chrome上根本不起作用，任何关于它可能是什么的想法？

Answer 1

要正常工作，必须像这样定义缩放：

zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .on("zoom", function () {
        map.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
    });

注意＆＃34; map.attr＆＃34;而不是＆＃34; svg.attr＆＃34;。但是，它并没有解决窗口大小以及它无法在Chrome上运行的问题。

如何获得zoom.translate（）的结果而不改变平移的敏感性？

1 个答案: