Develop Reference

D3.js: text attributes not being appended correctly? [duplicate]

This question already has answers here:
D3 - Getting text on the top of rectangles in Vertical Bar chart
(2 answers)
Closed 4 years ago.
I'm new to d3.js and I'm creating a simple horizontal bar chart with two bars. I want to put text labels on the two bars. The code below looks correct according to my research, but no text shows on the screen. From the dev console, it looks like the text elements are not being added.
Here's the javascript code:
var dataArray = [23, 13];
var svg = d3.select("svg.d3svg")
.attr("height", "20%")
.attr("width", "100%")
.selectAll("rect")
.data(dataArray)
.enter().append("rect")
.attr("height", "7")
.attr("width", "250")
.attr("y", function(d, i) {return (i * 40) + 50 })
.attr("x", "0")
.attr("class", "d3bar");
svg.selectAll("text")
.data(dataArray)
.enter().append("text")
.attr("class", "text-svg")
.text(function(d) {return d})
.attr("x", "0")
.attr("y", function(d, i) {return (i * 40) + 50});
The text-svg class contains only:
.text-svg {
fill: white;
font-family: sans-serif;
}
This correctly code targets the svg element on the html page because the bars are placed where I want them, but I haven't been able to get the text to show.
Thanks for any help.

As per the comment from #rioV8, you need to restructure so that your text and rect nodes are children of a g like so:
var dataArray = [23, 13];
var svg = d3.select("svg")
.attr("height", "20%")
.attr("width", "100%")
var bar = svg.selectAll("g")
.data(dataArray)
.enter().append("g")
var rect = bar.append('rect')
.attr("height", "7")
.attr("width", "250")
.attr("y", function(d, i) {
return (i * 40) + 50
})
.attr("x", "0")
.attr("class", "d3bar");
var text = bar.append('text')
.attr("class", "text-svg")
.text(function(d) {
return d
})
.attr("x", "0")
.attr("y", function(d, i) {
return (i * 40) + 45
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg></svg>
This would give you a valid SVG structure like this:
<svg height="20%" width="100%">
<g>
<rect height="7" width="250" y="50" x="0" class="d3bar"></rect>
<text class="text-svg" x="0" y="50">23</text>
</g>
<g>
<rect height="7" width="250" y="90" x="0" class="d3bar"></rect>
<text class="text-svg" x="0" y="90">13</text>
</g>
</svg>
Have a look a look at the docs for SVG rect. It says:
Permitted content: Any number of the following elements, in any order: Animation elements, Descriptive elements
Now have a look at the docs for SVG g. It says:
Permitted content: Any number of the following elements, in any order:
Animation elements, Descriptive elements, Shape elements, Structural elements, Gradient elements
From these usage notes we get exactly what #rioV8 commented: text is not an allowed child tag of rect.
Codepen

Draw circles with text in the middle using Javascript/CSS [duplicate]

I've been using the sample code from this d3 project to learn how to display d3 graphs and I can't seem to get text to show up in the middle of the circles (similar to this example and this example). I've looked at other examples and have tried adding
node.append("title").text("Node Name To Display")
and
node.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em").text("Node Name To Display")
right after node is defined but the only results I see is "Node Name To Display" is showing up when I hover over each node. It's not showing up as text inside the circle. Do I have to write my own svg text object and determine the coordinates of that it needs to be placed at based on the coordinates of radius of the circle? From the other two examples, it would seem like d3 already takes cares of this somehow. I just don't know the right attribute to call/set.

There are lots of examples showing how to add labels to graph and tree visualizations, but I'd probably start with this one as the simplest:
http://bl.ocks.org/950642
You haven’t posted a link to your code, but I'm guessing that node refers to a selection of SVG circle elements. You can’t add text elements to circle elements because circle elements are not containers; adding a text element to a circle will be ignored.
Typically you use a G element to group a circle element (or an image element, as above) and a text element for each node. The resulting structure looks like this:
<g class="node" transform="translate(130,492)">
<circle r="4.5"/>
<text dx="12" dy=".35em">Gavroche</text>
</g>
Use a data-join to create the G elements for each node, and then use selection.append to add a circle and a text element for each. Something like this:
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
One downside of this approach is that you may want the labels to be drawn on top of the circles. Since SVG does not yet support z-index, elements are drawn in document order; so, the above approach causes a label to be drawn above its circle, but it may be drawn under other circles. You can fix this by using two data-joins and creating separate groups for circles and labels, like so:
<g class="nodes">
<circle transform="translate(130,492)" r="4.5"/>
<circle transform="translate(110,249)" r="4.5"/>
…
</g>
<g class="labels">
<text transform="translate(130,492)" dx="12" dy=".35em">Gavroche</text>
<text transform="translate(110,249)" dx="12" dy=".35em">Valjean</text>
…
</g>
And the corresponding JavaScript:
var circle = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 4.5)
.call(force.drag);
var text = svg.append("g")
.attr("class", "labels")
.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
This technique is used in the Mobile Patent Suits example (with an additional text element used to create a white shadow).

I found this guide very useful in trying to accomplish something similar :
https://www.dashingd3js.com/svg-text-element
Based on above link this code will generate circle labels :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body style="overflow: hidden;">
<div id="canvas" style="overflow: hidden;"></div>
<script type="text/javascript">
var graph = {
"nodes": [
{name: "1", "group": 1, x: 100, y: 90, r: 10 , connected : "2"},
{name: "2", "group": 1, x: 200, y: 50, r: 15, connected : "1"},
{name: "3", "group": 2, x: 200, y: 130, r: 25, connected : "1"}
]
}
$( document ).ready(function() {
var width = 2000;
var height = 2000;
var svg = d3.select("#canvas").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var lines = svg.attr("class", "line")
.selectAll("line").data(graph.nodes)
.enter().append("line")
.style("stroke", "gray") // <<<<< Add a color
.attr("x1", function (d, i) {
return d.x
})
.attr("y1", function (d) {
return d.y
})
.attr("x2", function (d) {
return findAttribute(d.connected).x
})
.attr("y2", function (d) {
return findAttribute(d.connected).y
})
var circles = svg.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", function (d, i) {
return d.r
})
.attr("cx", function (d, i) {
return d.x
})
.attr("cy", function (d, i) {
return d.y
});
var text = svg.selectAll("text")
.data(graph.nodes)
.enter()
.append("text");
var textLabels = text
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.text( function (d) { return d.name })
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "red");
});
function findAttribute(name) {
for (var i = 0, len = graph.nodes.length; i < len; i++) {
if (graph.nodes[i].name === name)
return graph.nodes[i]; // Return as soon as the object is found
}
return null; // The object was not found
}
</script>
</body>
</html>

If you want to grow the nodes to fit large labels, you can use the getBBox property of an SVG text node after you've drawn it. Here's how I did it, for a list of nodes with fixed coordinates, and two possible shapes:
nodes.forEach(function(v) {
var nd;
var cx = v.coord[0];
var cy = v.coord[1];
switch (v.shape) {
case "circle":
nd = svg.append("circle");
break;
case "rectangle":
nd = svg.append("rect");
break;
}
var w = 10;
var h = 10;
if (v.label != "") {
var lText = svg.append("text");
lText.attr("x", cx)
.attr("y", cy + 5)
.attr("class", "labelText")
.text(v.label);
var bbox = lText.node().getBBox();
w = Math.max(w,bbox.width);
h = Math.max(h,bbox.height);
}
var pad = 4;
switch (v.shape) {
case "circle":
nd.attr("cx", cx)
.attr("cy", cy)
.attr("r", Math.sqrt(w*w + h*h)/2 + pad);
break;
case "rectangle":
nd.attr("x", cx - w/2 - pad)
.attr("y", cy - h/2 - pad)
.attr("width", w + 2*pad)
.attr("height", h + 2*pad);
break;
}
});
Note that the shape is added, the text is added, then the shape is positioned, in order to get the text to show on top.

Text label hides behind the circle node in d3.js [duplicate]

I've been using the sample code from this d3 project to learn how to display d3 graphs and I can't seem to get text to show up in the middle of the circles (similar to this example and this example). I've looked at other examples and have tried adding
node.append("title").text("Node Name To Display")
and
node.append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em").text("Node Name To Display")
right after node is defined but the only results I see is "Node Name To Display" is showing up when I hover over each node. It's not showing up as text inside the circle. Do I have to write my own svg text object and determine the coordinates of that it needs to be placed at based on the coordinates of radius of the circle? From the other two examples, it would seem like d3 already takes cares of this somehow. I just don't know the right attribute to call/set.

There are lots of examples showing how to add labels to graph and tree visualizations, but I'd probably start with this one as the simplest:
http://bl.ocks.org/950642
You haven’t posted a link to your code, but I'm guessing that node refers to a selection of SVG circle elements. You can’t add text elements to circle elements because circle elements are not containers; adding a text element to a circle will be ignored.
Typically you use a G element to group a circle element (or an image element, as above) and a text element for each node. The resulting structure looks like this:
<g class="node" transform="translate(130,492)">
<circle r="4.5"/>
<text dx="12" dy=".35em">Gavroche</text>
</g>
Use a data-join to create the G elements for each node, and then use selection.append to add a circle and a text element for each. Something like this:
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", 4.5);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
One downside of this approach is that you may want the labels to be drawn on top of the circles. Since SVG does not yet support z-index, elements are drawn in document order; so, the above approach causes a label to be drawn above its circle, but it may be drawn under other circles. You can fix this by using two data-joins and creating separate groups for circles and labels, like so:
<g class="nodes">
<circle transform="translate(130,492)" r="4.5"/>
<circle transform="translate(110,249)" r="4.5"/>
…
</g>
<g class="labels">
<text transform="translate(130,492)" dx="12" dy=".35em">Gavroche</text>
<text transform="translate(110,249)" dx="12" dy=".35em">Valjean</text>
…
</g>
And the corresponding JavaScript:
var circle = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("r", 4.5)
.call(force.drag);
var text = svg.append("g")
.attr("class", "labels")
.selectAll("text")
.data(nodes)
.enter().append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
This technique is used in the Mobile Patent Suits example (with an additional text element used to create a white shadow).

I found this guide very useful in trying to accomplish something similar :
https://www.dashingd3js.com/svg-text-element
Based on above link this code will generate circle labels :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body style="overflow: hidden;">
<div id="canvas" style="overflow: hidden;"></div>
<script type="text/javascript">
var graph = {
"nodes": [
{name: "1", "group": 1, x: 100, y: 90, r: 10 , connected : "2"},
{name: "2", "group": 1, x: 200, y: 50, r: 15, connected : "1"},
{name: "3", "group": 2, x: 200, y: 130, r: 25, connected : "1"}
]
}
$( document ).ready(function() {
var width = 2000;
var height = 2000;
var svg = d3.select("#canvas").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var lines = svg.attr("class", "line")
.selectAll("line").data(graph.nodes)
.enter().append("line")
.style("stroke", "gray") // <<<<< Add a color
.attr("x1", function (d, i) {
return d.x
})
.attr("y1", function (d) {
return d.y
})
.attr("x2", function (d) {
return findAttribute(d.connected).x
})
.attr("y2", function (d) {
return findAttribute(d.connected).y
})
var circles = svg.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", function (d, i) {
return d.r
})
.attr("cx", function (d, i) {
return d.x
})
.attr("cy", function (d, i) {
return d.y
});
var text = svg.selectAll("text")
.data(graph.nodes)
.enter()
.append("text");
var textLabels = text
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.text( function (d) { return d.name })
.attr("font-family", "sans-serif")
.attr("font-size", "10px")
.attr("fill", "red");
});
function findAttribute(name) {
for (var i = 0, len = graph.nodes.length; i < len; i++) {
if (graph.nodes[i].name === name)
return graph.nodes[i]; // Return as soon as the object is found
}
return null; // The object was not found
}
</script>
</body>
</html>

If you want to grow the nodes to fit large labels, you can use the getBBox property of an SVG text node after you've drawn it. Here's how I did it, for a list of nodes with fixed coordinates, and two possible shapes:
nodes.forEach(function(v) {
var nd;
var cx = v.coord[0];
var cy = v.coord[1];
switch (v.shape) {
case "circle":
nd = svg.append("circle");
break;
case "rectangle":
nd = svg.append("rect");
break;
}
var w = 10;
var h = 10;
if (v.label != "") {
var lText = svg.append("text");
lText.attr("x", cx)
.attr("y", cy + 5)
.attr("class", "labelText")
.text(v.label);
var bbox = lText.node().getBBox();
w = Math.max(w,bbox.width);
h = Math.max(h,bbox.height);
}
var pad = 4;
switch (v.shape) {
case "circle":
nd.attr("cx", cx)
.attr("cy", cy)
.attr("r", Math.sqrt(w*w + h*h)/2 + pad);
break;
case "rectangle":
nd.attr("x", cx - w/2 - pad)
.attr("y", cy - h/2 - pad)
.attr("width", w + 2*pad)
.attr("height", h + 2*pad);
break;
}
});
Note that the shape is added, the text is added, then the shape is positioned, in order to get the text to show on top.

Javascript's getBBox() provides a box that is taller than its content text. Why?

I'm using D3.js to draw some text ("100%") on an SVG Container.
Now I'm trying to figure out the dimensions of the bounding box around that text.
This is how I do it:
var label = svgContainer.append("text")
.attr("x", 200)
.attr("y", 200)
.text("100%")
.attr("font-family", "Courier New")
.attr("font-weight", "bold")
.attr("font-size", "10px")
.attr("fill", "black");
.attr("transform", function(d){
var bb = this.getBBox();
console.log("bb.width = ", bb.width);
console.log("bb.height = ", bb.height);
return "translate(0, 0)";
}
);
Not only does this draw the string "100%" on my screen, but in the console.log, it also outputs the width and height of the bounding box (24 & 11.5 respectively!);
Now I want to visualize the aforementioned bounding box on the screen. So before the code above, I prepend the following code:
var rect = svgContainer.append("rect")
.attr("x", 200)
.attr("y", 200-11.5)
.attr("width", 24)
.attr("height", 11.5)
.attr("fill", "pink");
When I run this altered code, I expect to see a pink bounding box around the "100%" string. But I see the following instead!
Why is the pink bounding box taller than the text? I need to get the dimensions of the actual bounding-box of the text -- not something taller than it. How do I do that?
Here is the Plunker: https://plnkr.co/edit/XoVSZwTBNXhdKKJKkYWn

There are two things going on here:
You are only using the height and width fields of the bounding box. You should be also taking into account the x and y attributes of the bounding box - as #Gilsha correctly pointed out. When you do adjust for the x and y, you'll see the box sits a little lower:
var svg = document.getElementById("my_svg_widget");
var bbox = svg.getElementById("test").getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", bbox.x);
rect.setAttribute("y", bbox.y);
rect.setAttribute("width", bbox.width);
rect.setAttribute("height", bbox.height);
rect.setAttribute("fill", "rgba(255, 0, 0, 0.5)");
svg.appendChild(rect);
<svg id="my_svg_widget" width="300" height="300" style="border-style:solid;border-color:purple;border-width: 2px;">
<text id="test" x="100" y="100" font-family="Courier New" font-weight="bold" font-size="50px">100%</text>
</svg>
This brings us to the second reason. The bounding box returned by getBBox() is not the tight bounding box around the glyphs. It includes the full em-box height of the text - including allowance for ascenders (tallest characters in font) and descenders (lowest below baseline).
You can see what I mean if we include some of those characters in the text element.
var svg = document.getElementById("my_svg_widget");
var bbox = svg.getElementById("test").getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", bbox.x);
rect.setAttribute("y", bbox.y);
rect.setAttribute("width", bbox.width);
rect.setAttribute("height", bbox.height);
rect.setAttribute("fill", "rgba(255, 0, 0, 0.5)");
svg.appendChild(rect);
<svg id="my_svg_widget" width="300" height="300" style="border-style:solid;border-color:purple;border-width: 2px;">
<text id="test" x="100" y="100" font-family="Courier New" font-weight="bold" font-size="50px">Á100%╣</text>
</svg>

You can directly use bounding box x and y attributes. Use below code.
var label = self.svgContainer.append("text")
.attr("x", 200)
.attr("y", 200)
.text("100%")
.attr("font-family", "Courier New")
.attr("font-weight", "bold")
.attr("font-size", "10px")
.attr("fill", "black")
.attr("transform", function(d){
var bb = this.getBBox();
self.svgContainer.insert("rect","text")
.attr("x", bb.x)
.attr("y", bb.y)
.attr("width", bb.width)
.attr("height", bb.height)
.attr("fill", "pink");
return "translate(0, 0)";
});
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function() {
var self = this;
self.svgContainer = d3.select("#my_svg_widget");
console.log("Hello!");
var label = self.svgContainer.append("text")
.attr("x", 200)
.attr("y", 200)
.text("100%")
.attr("font-family", "Courier New")
.attr("font-weight", "bold")
.attr("font-size", "10px")
.attr("fill", "black")
.attr("transform", function(d){
var bb = this.getBBox();
self.svgContainer.insert("rect","text")
.attr("x", bb.x)
.attr("y", bb.y)
.attr("width", bb.width)
.attr("height", bb.height)
.attr("fill", "pink");
return "translate(0, 0)";
});
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp">
<body ng-controller="MyController as mycontroller">
<svg id="my_svg_widget" width="300" height="300" style="border-style:solid;border-color:purple;border-width: 2px;">
</svg>
</body>
</html>

Zooming on specific element with d3js

I recently just found d3js and this block of example code when looking for a good way to zoom on elements: the example. I'm trying to use the same method of zooming, but instead of using json to populate the svg and body, I want to just zoom on specific html elements.I'm new to using d3 so I'm not sure what exactly I'm doing wrong, but heres my code so far:
JS:
window.onload=function(){
var width = 400,
height = 400,
centered;
var projection = d3.geo.albersUsa()
.scale(1070)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.on("click", clicked);
var circle = svg.append("circle")
.attr("class", "logo")
.attr("cx", 225)
.attr("cy", 225)
.attr("r", 20)
.style("fill", "transparent")
.style("stroke", "black")
.style("stroke-width", 0.25)
.attr("d", path)
.on("click", clicked)
.on("mouseout", function(){
d3.select(this)
.style("fill", "transparent");
});
function clicked(d) {
console.log("clicked");
var x, y, k;
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
circle.selectAll("path")
.classed("active", centered && function(d) { return d === centered; });
circle.transition()
.duration(750)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.style("stroke-width", 1.5 / k + "px");
}
}
HTML:
<script src="d3.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<svg id="mySvg" width="80" height="80">
<defs id="mdef">
<pattern id="image" x="0" y="0" height="40" width="40">
<image x="0" y="0" width="40" height="40" xlink:href="image1.png"></image>
</pattern>
</defs>
</body>
Here is a fiddle of what I have so far. As you can see it calls the click function and styles the stroke width, but it doesn't zoom on the object.