d3缩放不以径向树的鼠标位置为中心答案

【问题标题】：d3 zoom not centering on mouse position with radial treed3缩放不以径向树的鼠标位置为中心
【发布时间】：2015-03-28 18:26:32
【问题描述】：

我正在尝试将相当标准的 d3 拖动/缩放功能应用于径向树布局。

问题是，如果我将 zoomhandler 定义为这样...

svg.attr("transform","translate("+d3.event.translate+")scale("+d3.event.scale+")");

...然后缩放完全跟随鼠标，但整个径向树在第一次缩放时从错误的位置开始（即(0,0) 坐标）。

而如果我将 zoomhandler 定义为这样...

svg.attr("transform", "translate(" + (w/2 + d3.event.translate[0]) +
     "," + (h/2 + d3.event.translate[1]) + ")scale(" + d3.event.scale + ")" );

...然后树的行为正确，但缩放不跟随鼠标（事实上，为了在不移动树的情况下放大/缩小树，我的鼠标需要定位在 0,0 坐标屏幕左上角）

我很欣赏这是一个之前讨论过的话题（我认为最值得注意的是：Using D3, can semantic zoom be applied to a radial tree?），但我仍然不清楚如何解决这个问题，因此非常感谢任何专门解决此问题的人的任何意见让径向树同时缩放到鼠标位置并同时保持锚定在屏幕中心的问题。谢谢！

这里有详细的完整代码...

var w = 1200;
var h = 1000;

var data = [{'parent_id' : '1', 'items_count' : '2'}
  , {'parent_id' : '2', 'items_count' : '4'}
  , {'parent_id' : '3', 'items_count' : '3'}
  , {'parent_id' : '4', 'items_count' : '2'}
  , {'parent_id' : '5', 'items_count' : '1'}
  , {'parent_id' : '6', 'items_count' : '6'}
  , {'parent_id' : '7', 'items_count' : '2'}
  , {'parent_id' : '8', 'items_count' : '4'}
  , {'parent_id' : '9', 'items_count' : '5'}
  , {'parent_id' : '10', 'items_count' : '7'}
];

var treeRadius = 300;
var searchCircleRadius = 60;

var circleRadiusScale = d3.scale.linear()
  .domain([0, d3.max(data, function(d) { return d.items_count; })])
  .range([10, 40]);

var dataTree = {
  children: data.map(function(d) { return { parent_id: d.parent_id, items_count: d.items_count}; })
};

var tree = d3.layout.tree()
  .size([360, treeRadius]);

var mainSvg = d3.select("body").append("svg")
  .attr("width", w)
  .attr("height", h);

var svg = mainSvg
  .append("g")
  .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");

var childGroupZoom = svg.append("g");

var zoomListener = d3.behavior.zoom()
  .scaleExtent([0.1, 1.75])
  .on("zoom", zoomHandler);

function zoomHandler() {
  //1) for both of these, the tree starts in centre of screen, drag works nicely, but zoom doesn't follow mouse
  //childGroupZoom.attr("transform", "translate(" + (d3.event.translate[0]) + "," + (d3.event.translate[1]) + ") scale(" + d3.event.scale + ")"); 
  childGroupZoom.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");

  //2) follows the mouse on zoom but jump to top-left on first zoom/drag (because it's applied to "svg" which already has a translate applied)...
  //svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); //follows mouse on zoom but starts at wrong place

  //3) same as the first category - the tree doesn't jump, but the zoom doesn't follow the mouse
  //svg.attr("transform", "translate(" + (w/2 + d3.event.translate[0]) + "," + (h/2 + d3.event.translate[1]) + ")scale(" + d3.event.scale + ")" ); //starts in centre but doesn't follow mouse!
}

zoomListener(mainSvg);

var nodes = tree.nodes(dataTree);

var basicNode = childGroupZoom.selectAll(".node");

var node = basicNode
  .data(nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "rotate(" + (d.x - 90) + ") translate(" + d.y + ")";
  });

var outlineCircles = node.append("circle")
  .attr("r", function(d,i) { if (i<1) {
    return searchCircleRadius;
  } else {
    return circleRadiusScale(d.items_count);
  }})
  .attr("stroke", "#0099FF")
  .attr("stroke-width", "3")
  .attr("transform", function(d) {return "rotate(" + (-d.x + 90) + ")";});

<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
</body>
</html>

【问题讨论】：

我想你正在做这样的事情：翻译到对象中心、缩放、翻译回上一个位置。
感谢 bvj 的回复 - 我已经在上面添加了确切的详细信息
抱歉追，但有人对此有任何想法吗？我完全被卡住了，找不到解释这个概念的任何其他资源。谢谢！
这是完整的工作代码，列出了缩放处理程序中问题的本质...

标签： d3.js

【解决方案1】：

var dragListener = d3.behavior.drag()
    .on("drag", function() {
        dragX = d3.event.dx;
        dragY = d3.event.dy;
    });
    
mainSvg.call(dragListener);

var dragging = 0;   
var dragX = 0, dragY = 0;

dragListener.on("dragstart", function() {
  dragging = 1;
}); 

dragListener.on("dragend", function() {
  dragging = 0;
  dragX = 0;
  dragY = 0;
}); 

function zoomHandler() {
    var pos = d3.mouse(this);
    var scale = d3.event.scale;

    var trans = d3.transform(childGroupZoom.attr("transform"));
    var tpos = trans.translate;
    var tscale = trans.scale;
    var tx = tpos[0];
    var ty = tpos[1];
    var mx = pos[0] - w/2;
    var my = pos[1] - h/2;

    var dx =  (mx - tx - dragX)/tscale[0];
    var dy =  (my - ty - dragY)/tscale[1];
    var dx2 = (mx - dx)/scale - dx;
    var dy2 = (my - dy)/scale - dy;

    var tform = "translate(" + dx + "," + dy + ")scale(" + scale + ")translate(" + dx2 + "," + dy2 + ")"
    childGroupZoom.attr("transform", tform); 
}

var w = 1200;
var h = 1000;

var data = [{
  'parent_id': '1',
  'items_count': '2'
}, {
  'parent_id': '2',
  'items_count': '4'
}, {
  'parent_id': '3',
  'items_count': '3'
}, {
  'parent_id': '4',
  'items_count': '2'
}, {
  'parent_id': '5',
  'items_count': '1'
}, {
  'parent_id': '6',
  'items_count': '6'
}, {
  'parent_id': '7',
  'items_count': '2'
}, {
  'parent_id': '8',
  'items_count': '4'
}, {
  'parent_id': '9',
  'items_count': '5'
}, {
  'parent_id': '10',
  'items_count': '7'
}];

var treeRadius = 300;
var searchCircleRadius = 60;

var circleRadiusScale = d3.scale.linear()
  .domain([0, d3.max(data, function(d) {
    return d.items_count;
  })])
  .range([10, 40]);

var dataTree = {
  children: data.map(function(d) {
    return {
      parent_id: d.parent_id,
      items_count: d.items_count
    };
  })
};

var tree = d3.layout.tree()
  .size([360, treeRadius]);

var mainSvg = d3.select("body").append("svg")
  .attr("width", w)
  .attr("height", h);

var svg = mainSvg
  .append("g")
  .attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");

var childGroupZoom = svg.append("g");

var zoomListener = d3.behavior.zoom()
  .scaleExtent([0.1, 1.75])
  .on("zoom", zoomHandler);

zoomListener(mainSvg);

var nodes = tree.nodes(dataTree);

var basicNode = childGroupZoom.selectAll(".node");

var node = basicNode
  .data(nodes)
  .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) {
    return "rotate(" + (d.x - 90) + ") translate(" + d.y + ")";
  });

var outlineCircles = node.append("circle")
  .attr("r", function(d, i) {
    if (i < 1) {
      return searchCircleRadius;
    } else {
      return circleRadiusScale(d.items_count);
    }
  })
  .attr("stroke", "#0099FF")
  .attr("stroke-width", "3")
  .attr("transform", function(d) {
    return "rotate(" + (-d.x + 90) + ")";
  });


var dragListener = d3.behavior.drag()
  .on("drag", function() {
    dragX = d3.event.dx;
    dragY = d3.event.dy;
  });

mainSvg.call(dragListener);

var dragging = 0;
var dragX = 0,
  dragY = 0;

dragListener.on("dragstart", function() {
  dragging = 1;
});

dragListener.on("dragend", function() {
  dragging = 0;
  dragX = 0;
  dragY = 0;
});

function zoomHandler() {
  var pos = d3.mouse(this);
  var scale = d3.event.scale;

  var trans = d3.transform(childGroupZoom.attr("transform"));
  var tpos = trans.translate;
  var tscale = trans.scale;
  var tx = tpos[0];
  var ty = tpos[1];
  var mx = pos[0] - w / 2;
  var my = pos[1] - h / 2;

  var dx = (mx - tx - dragX) / tscale[0];
  var dy = (my - ty - dragY) / tscale[1];
  var dx2 = (mx - dx) / scale - dx;
  var dy2 = (my - dy) / scale - dy;

  var tform = "translate(" + dx + "," + dy + ")scale(" + scale + ")translate(" + dx2 + "," + dy2 + ")"
  childGroupZoom.attr("transform", tform);
}

<!DOCTYPE html>
<html>

<head>
  <title>Demo</title>
  <script src="http://d3js.org/d3.v3.min.js"></script>
</head>

<body>
</body>

</html>

注意：缩放处理程序也被框架调用拖动操作，通过 dragX 和 dragY 促进对象移动.

【讨论】：

嗨，bvj，非常感谢您的帮助！除了我注意到的两个小问题之外，这很好用：1）当您缩小时树会跟随鼠标，但当您放大时会朝相反的方向（远离鼠标）移动。2）树不再拖动.我将尝试通过您的结构来解决这些问题，但如果您认为它很容易解决，请感谢您的任何见解 - 再次感谢！
对不起，但我在上面的评论中的第 1 点偏离了 - 放大和缩小工作完美。尽管如此，仍然在阻力上挣扎，所以感谢任何关于我最后剩下的问题的进一步意见！谢谢。
酷。如果您可以接受/支持我的回答，那就太好了（考虑到有关缩放的问题。）尝试了解缩放/平移发生了什么，然后将该知识应用于移动要求。如果您仍然遇到问题，请跟进。
嗨，bvj，对不起，我试图给你投票，但它说我没有必要的 15 个声望点！如果我知道如何获得它们，我很乐意为答案投票，因为正如您所说，它肯定纠正了缩放行为。
再次感谢 bvj，最后一次编辑现在完美运行 - 径向树可以放大/缩小和拖动！