D3 强制布局中的 SVG 节点在节点规模上移动答案

【问题标题】：SVG nodes in D3 force layout moves on node scaleD3 强制布局中的 SVG 节点在节点规模上移动
【发布时间】：2014-06-30 14:40:09
【问题描述】：

我正在尝试使用 CSS 在 D3 强制布局中缩放节点（圆形标签），像这样

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

节点被缩放，但它也从左上角移开相同的量，就像整个图层被缩放一样。然而，没有其他任何东西（除了节点）被缩放。

目前我没有示例可展示。我很乐意就那里发生的事情提出建议。

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

Style SVG circle with CSS

更新：我分叉了一个小提琴并添加了转换。所以这里是一个活生生的例子：http://jsfiddle.net/UagSD/3/

【问题讨论】：

标签： css svg d3.js force-layout

【解决方案1】：

您可能希望在 CSS 中指定 transform origin 点，如下所示（如果需要，可以使用供应商前缀版本）：

transform-origin: center center

【讨论】：

谢谢@Delapouite！这似乎工作得很好。（而且我想它会成为标准。看起来非常有用和直观。）
我仍然很困惑。请参阅此示例（来自 Sewell）：jsbin.com/sozewiso/2/edit。为什么这个例子没有transform-origin 也能工作？是因为圈子是用translate放的，还是？

【解决方案2】：

我不认为你可以用 css 来做到这一点，因为半径不能用 css 设置。但是你可以使用 d3 mouseover 和 mouseout 事件来做到这一点，如下所示

 var nodes =svg.selectAll(".node")
                .data(data)
                .enter().append("circle")
                .attr("class", "node")
                .attr("r", 40)
                .on("mouseover", function(d){d3.select(this).transition().attr("r",60)})
                .on("mouseout", function(d){d3.select(this).transition().attr("r",40)})
                .call(force.drag);

这里http://jsfiddle.net/N99Az/是小提琴

【讨论】：

谢谢，当然可以选择使用 javascript。但请参阅 Sewell 的答案（或我上面的小提琴）。这里的问题不是半径不能改变，而是使用 scale(...) 时原点移动。