Невидимый текст внутри текстового элемента svg

У меня есть простая функция, которая должна отображать пару текстовых элементов.

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>

В чем проблема?