css - SVG 文本响应定位

Question

所以我有一个 SVG 矩形，里面有 SVG 文本。放置在文本框中的 SVG 文本包括来自用户配置文件的内容。此信息是从服务器发送的，我希望它有一个特定的定位，如下所示:

到目前为止，我已经设法相当轻松地做到这一点......但问题是有时人们没有完整填写他们的个人资料(即他们留下了他们的出生日期或位置)所以它最终创建了一个空白的 SVG 文本。

<g display="default">
   <text x="10" y="30">Alexander the Great</text>
   <text x="10" y="40"></text>
   <text x="10" y="50">Greece </text>
</g>

我可以假设他们总是有自己的名字，但如果没有提供出生日期，我想要它以便我的文本框足够智能，它将位置移动到名字的正下方。

现在我在我的文本节点中输入特定的 x 和 y 属性，这就是为什么这被证明有点困难。有没有办法让它的定位更灵敏？通过 CSS 还是通过 SVG 属性？我通过 D3.js 生成 SVG 元素，所以如果需要，我可以简单地设置 if 语句来检查，但我有点想避免这种情况。谢谢。

Answer 1

您可能会使用序数 Y 尺度和数据绑定(bind)来控制 <text> 的数量和位置元素。

因为您关心元素的数量而不一定是内容，所以您的比例可以基于数组索引:

var yScale = d3.scale.ordinal()
    .domain([0, 1, 2])
    .range([30, 40, 50]);

如果您将数据放入一个数组(或多个用户的数组数组)中，您可以这样做(假设只有一个用户):

d3.selectAll("text")
    .data(profile)
    .enter().append("text")
        .attr("x", 10)
        .attr("y", function(d, i) { return yScale(i); })
        .text(function(d) { return d; });

如果您的“配置文件”数组是 ["Alexander the Great", "Greece"]你只会得到名字和位置。如果您包含出生数据元素，那么您将获得所有 3 个字段。