Question

此代码在此处运行：http://domtree.breckyunits.com

稍微偏离的部分是缩放行为。当我放大一个点时，它会正确缩放但转换为错误的点。我觉得我需要同时进行某种类型的转换/翻译，但我不太清楚如何理解这些东西。我对线性代数和向量/矩阵的实践很少。

需要工作的代码部分是重绘功能：

var redraw = function () {
  vis.attr("transform", "scale(" + d3.event.scale + "," + d3.event.scale + ") "
    + "translate(" + d3.event.translate[0] + "," + d3.event.translate[1] + ")");
}

您可以在https://github.com/breck7/domtree/blob/master/domtree.js

查看所有代码

vis在前面的代码中定义：

vis = d3.select("#body").append("svg:svg")
    .attr("viewBox", "0 0 " + w + " " + h )
    .call(d3.behavior.zoom().on("zoom", redraw))
    .attr("preserveAspectRatio", "xMidYMid meet")
    .append("svg:g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

Answer 1

不要在[Object]“vis”中包含.call（）以简化调试

阅读其他帖子： d3.js zoom xScale / xAxis

var vis, zm; // as global !
vis.call(zm=d3.behavior.zoom().on("zoom", draw));
function draw() {
    console.log(zm.scale(), zm.translate());
}

为什么我的缩放在这个d3代码中出错了？

1 个答案: