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

给它一个x和y就像@jrook建议的那样。（默认填充为黑色）

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>

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

1 个答案: