javascript - svg文本元素内的不可见文本

Question

我有一个简单的函数，应该显示几个文本元素。

function d3manipulation() {
    var svg = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500);
    var nodes = [
        { "name": "Michael" },
        { "name": "John" }
    ];
    svg
        .selectAll("text")
        .data(nodes)
        .enter()
        .append("text")
        .text(function(d) { return d.name; });
}

但是页面上什么也没显示。我也没有任何控制台错误。

但是，inspector 显示实际上存在包含数据的 text 元素。

<svg width="500" height="500">
    <text>Michael</text>
    <text>John</text>
</svg>

问题是什么？

Answer 1

像 @jrook 建议的那样，给它一个 x 和 y 就足够了。 (默认填充为黑色)

var svg = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500);
    var nodes = [
        { "name": "Michael" },
        { "name": "John" }
    ];
    svg
        .selectAll("text")
        .data(nodes)
        .enter()
        .append("text")
        .text(function(d) { return d.name; })
        .attr('x', 20)
        .attr('y', (d, i) => 30 + 20 * i);

<script src="https://d3js.org/d3.v5.min.js"></script>