Question

我正在尝试使用CSS缩放D3强制布局中的节点（圆形标记），如此

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

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

此刻我没有示例。我很乐意就那里发生的事情提出建议。

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

Style SVG circle with CSS

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

Answer 1

您可能希望在CSS中指定转换源点（如果需要，可以使用供应商前缀版本）：

transform-origin: center center

Answer 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/是小提琴

D3力布局中的SVG节点在节点规模上移动

2 个答案: