CODEWITHSUNDEEP
d3.js
Jackie
Jackie

Reputation: 23527

Text tag not displaying properly in D3 SVG

I have the following code to generate a simple graph in D3...

var width = 800, height = 800;
// force layout setup
var force = d3.layout.force()
        .charge(-200).linkDistance(30).size([width, height]);

// setup svg div
var svg = d3.select("#graph").append("svg")
        .attr("width", "100%").attr("height", "100%")
        .attr("pointer-events", "all");

// load graph (nodes,links) json from /graph endpoint
d3.json("/graph", function(error, graph) {
    if (error) return;

    force.nodes(graph.nodes).links(graph.links).start();

    // render relationships as lines
    var link = svg.selectAll(".link")
            .data(graph.links).enter()
            .append("line")
            .attr("class", "link")
            .attr("stroke", "black");

    // render nodes as circles, css-class from label
    var node = svg.selectAll(".node")
            .data(graph.nodes).enter()
            .append("circle")
            .attr("r", 10)
            .call(force.drag);
    // html title attribute for title node-attribute
    node.append("title")
            .text(function (d) { return d.title; })
            .attr("font-family", "sans-serif")
            .attr("font-size", "20px")
            .attr("fill", "black");
    // force feed algo ticks for coordinate computation
    force.on("tick", function() {
        link.attr("x1", function(d) { return d.source.x; })
                .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });

        node.attr("cx", function(d) { return d.x; })
                .attr("cy", function(d) { return d.y; });
    });
});

Everything looks great except I cannot see the title. If I look at the DOM I see the following....

<circle r="10" cx="384.5368115283669" cy="390.4516626058579"><title font-family="sans-serif" font-size="20px" fill="black">My NAme</title></circle>

However no matter what I try I cannot seem to see the title. What am I missing here?

Upvotes: 0

Views: 501

Answers (1)

altocumulus
altocumulus

Reputation: 21578

This is nothing to blame on d3. As per the SVG 1.1 spec the title is a description string which will not be rendered when the graphic gets rendered. Most browsers, however, will display the title as a tooltip when the mouse pointer is over the element.

I have set up an updated snippet based on your code. Placing the mouse over the red circle will bring up the tooltip "My Name". 

<svg width="200" height="200">
  <circle r="10" cx="38" cy="39" fill="red">
    <title>My Name</title>
  </circle>
</svg>

To add text to your svg which will get rendered, use the <text> element instead.

<svg width="200" height="200">
  <text x="50" y="100">My Text</text>
</svg>

Upvotes: 2

Related Questions