D3中的SVG节点强制布局在节点尺度上移动 [英] SVG nodes in D3 force layout moves on node scale

问题描述

  circle：hover { 
 -webkit-transform：scale（1.5，1.5）; 
} 
  

节点被缩放，但它也从左上角移开量，像整个层被缩放。除了节点之外没有其他的缩放。

我没有例子可以显示。

我从Jonathan Sewell的回答中得到了这个想法：

带有CSS的Style SVG圆圈

更新：我叉了一个小提琴，并添加了变换。下面是一个实例： http://jsfiddle.net/UagSD/3/

解决方案

您可能需要在CSS中指定 transform origin 您需要它）：

  transform-origin：center center 
  

I am trying to scale nodes (circle tags) in D3 force layout with CSS, like this

circle:hover {
  -webkit-transform: scale(1.5, 1.5);
}

The node is scaled, but it also moves away from upper left corner the same amount, like the whole layer was scaled. Nothing else (except the node) is scaled however.

I have no example to show at the moment. I would be glad for suggestions about what is going on there.

I got the idea from the answer by Jonathan Sewell here:

Style SVG circle with CSS

UPDATE: I forked a fiddle and added the transform. So here is a live example: http://jsfiddle.net/UagSD/3/

解决方案

You may want to specify in your CSS the transform origin point like this (with the vendor prefixed versions if you need it) :

transform-origin: center center

这篇关于D3中的SVG节点强制布局在节点尺度上移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！