相关疑难解决方法(0)

变换后获取D3节点的屏幕位置

我试图在d3.behavior.zoom()转换布局后获取节点的屏幕位置,但我没有太多运气.在翻译和缩放布局后,我如何才能在窗口中获取节点的实际位置?

mouseOver = function(node) {
  screenX = magic(node.x); // Need a magic function to transform node
  screenY = magic(node.y); // positions into screen coordinates.
};
Run Code Online (Sandbox Code Playgroud)

任何指导将不胜感激.

编辑:上面的'node'是一个强制布局节点,因此它的x和y属性由模拟设置,并在模拟停止后保持不变,无论应用何种类型的变换.

编辑:我用来转换SVG的策略来自d3的缩放行为,这里概述了:SVG Geometric Zooming.

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
  .append("g");

svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", function(d) { return "translate(" + d + ")"; });

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); …
Run Code Online (Sandbox Code Playgroud)

position transform zoom d3.js

18
推荐指数
2
解决办法
3万
查看次数

标签 统计

d3.js ×1

position ×1

transform ×1

zoom ×1