我正在为d3图生成一个图例。以下是生成的html的摘录。
<svg width="200" height="180" style="background-color: rgb(225, 210, 225);">
<svg class="legend" id="#legendNodes"
width="180" height="100">
<g transform="translate(3,0)">
<rect width="18" height="18" style="fill: rgb(31, 119, 180);"></rect><text x="24" y="9" dy=".35em"
style="font-size: 10px;">External...Artefact</text>
</g>
<g .../>
</svg><svg class="legend" id="#legendLinks" width="180" height="80" transform="translate(0,120)">
<g transform="translate(3,0)">
<rect width="18" height="18" style="fill: rgb(214, 39, 40);"></rect><text x="24" y="9" dy=".35em"
style="font-size: 10px;">External...Link</text>
</g>
<g ... />
</svg>
</svg>
我想把两个形状放在另一个上面:节点列表和链接列表(井类型(。我把它们放在一个容器里;变换";下面的一个具有右偏移(在本例中为120px,1.9(。
这在firefox上运行得很好,但现在我需要在Chrome上使用它,但它已经不起作用了。
有关于如何解决这个问题的提示吗?
谢谢,Edouard
这里有一个解决方案:我改变了y的位置,而不是tranform((。
</svg><svg class="legend" id="#legendLinks" width="180" height="80" y="120">