CODEWITHSUNDEEP
javascriptd3.js
lapots
lapots

Reputation: 13395

invisible text inside svg text element

I've got a simple function that supposed to display a couple of text elements.

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; });
}

But on the page it shows nothing. I don't have any console errors either.

However inspector shows that there are in fact text elements with the data.

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

What is the problem?

Upvotes: 0

Views: 1610

Answers (1)

rioV8
rioV8

Reputation: 28623

Giving it an x and y was enough like @jrook suggested. (default fill is black)

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>

Upvotes: 1

Related Questions