Question

我正在尝试移动以下多行文本元素：

<text x="80" y="187.5" text-anchor="middle" stroke="#ffffff" fill="#ffffff" font-weight="bold" id="selector" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; ">
    <tspan dy="-13.203125" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 1</tspan>
    <tspan dy="19.2" x="80" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 2</tspan>
    <tspan dy="19.2" x="80" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Line 3</tspan>
</text>

我使用以下代码移动文本：

var tTargetDesc = d3.select("#selector").transition()
    .duration(750)
    .attr("x", function(d){
        return width / 16;
    });

但只移动了第一行。我是否必须逐个移动每个tspan？

Answer 1

如果您使用transform属性，则可以使用

var tTargetDesc = d3.select("#selector").transition()
    .duration(750)
    .attr("transform", function(d){
        return "translate(" + (width / 16) + ",0)";
    });

Answer 2

由于坐标空间的原因，翻译对我不起作用。这就是我最终做的事情

 var children = txtElement.children;
    for (var i = 0; i < children.length; i++) {
        var textChild = children[i];           
        textChild.setAttribute("x", _X);

    }

移动多行文本元素

2 个答案: