I'm trying to add text to nodes that are created dynamically, specifically, like this graph:
http://bl.ocks.org/mbostock/999346
I am NOT looking to add text to collapsible graphs, but to add text to graphs that insert nodes at runtime, as shown in the above example.
So far I have the following additional code:
node.enter().append("text", "g")
.attr("x", function(d) { return (d.x);})
.attr("y", function(d) { return (d.y);})
.text(function(d) { return d.name; })
.attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; });
This adds text but it doesn't move when nodes are inserted.
The below lines appear to move the nodes and links in the example:
var t = svg.transition()
.duration(duration);
t.selectAll(".link")
.attr("d", diagonal);
t.selectAll(".node")
.attr("cx", function(d) { return d.px = d.x; })
.attr("cy", function(d) { return d.py = d.y; });
but adding a similar function for text:
t.selectAll(".text")
.style("fill-opacity", 1);
has no effect.
I would very much appreciate any guidance on this matter.
The nodes are all identified with d3.selectAll('.node'), so you need to give them the node class.
Also, the cx and cy attributes don't exist on text elements. you want x and y instead.
Example fiddle is here.
Related
I have a grouped bar chart design that has each bar amount immediately above the bar instead of the y axis bar on the far left.
I have added the text like so...
svg.selectAll(".text")
.data(data)
.enter()
.append("text")
.attr("class","label")
.attr("x", function(d) { return x1(d.rate) })
//.attr("y", function(d) { return y(d.value) + 1; })
.attr("dy", ".75em")
.text(function(d) {return d.value; });
But i cant seem to obtain the x and y values according to the bar position and the actual text of the d.value isn't getting inserted.
Sample here:
https://jsfiddle.net/6p7hmef1/7/
That's because the data bound to the texts that you're adding isn't right.
If you add a console.log as follows, you'll be able to see why the labels aren't being inserted. Check for the outputs in console. Console log fiddle
.text(function(d) {console.log(d); return d.value; });
One approach would be to append the texts to the bar groups ("slice" in your case). Just like you do for the bars. Here's a fiddle doing this:
JS Fiddle Demo
slice.selectAll(".text")
.data(function(d) { return d.values; })
.enter()
.append("text")
.attr("class","label");
slice.selectAll('text.label')
.attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 })
.attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em')
.text(function(d) {return d.value; });
This might look weird as the texts are shown before the transition of the bars. So changing the value of texts once the bars are shown seems like the right approach to me. (dx and dy attributes can be adjusted as per the requirement)
Here's the final fiddle:
JS FIDDLE
I'm using the "end" callback for every transition and changing the text values accordingly.
.each('end', function () {
d3.select(this.parentNode).selectAll('text.label')
.attr("x", function(d) { return x1(d.rate)+ x1.rangeBand()/3 })
.attr("y", function(d) { return y(d.value) + 1; }).attr('dy', '-0.4em')
.text(function(d) {return d.value; });
})
Hope this helps. :)
Let me know if any part of the code isn't understandable.
jsfiddle https://jsfiddle.net/z7ju3z1q/3/
The problem is, I can't make titles stick with groups with working simulation.
Changing line 76 from simulation.nodes(nodes); to simulation.nodes(node); breaks simulation (apparently), but makes title stick to circles. As I understand, the problem is that dragging working with circles but not with groups, for some reason. And that's is the problem Iwe been facing whole day.
I tried describing title like this (line 38)
var title = g.selectAll("text");
And then adding it to tick (line 84)
function ticked() {
title.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
}
As I understand, the problem is that dragging working with circles but not with groups, for some reason
You are manipulating the nodes on drag with cx and cy properties. g elements do not have these, so this will not achieve what you want, even if node contained groups rather than circles:
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
As noted,node = g.append("circle") means that you aren't actually manipulating the g elements anyways, which is why your circles move on tick or drag.
Instead, keep node a selection of g elements, and manipulate the transform property:
// the group representing each node:
node = node.enter().append("g").merge(node);
// the circle for each group
node.append("circle")
.classed('node', true).attr('id', id)
.text(id)
.attr("r", 25).attr("fill", function(d) { return color(d.id); });
// the text for each group
node.append("text")
.classed('text', true)
.attr("text-anchor", "start")
.attr("dx", 6).text(id).merge(node);
Then, on click or drag events, just update the transform:
Tick:
node.attr("transform",function(d) { return "translate("+d.x+","+d.y+")" ;});
Drag:
d.x = d3.event.x;
d.y = d3.event.y;
d3.select(this).attr("transform",function(d) { return "translate("+d.x+","+d.y+")" ;});
Here's an updated fiddle.
I would like to reproduce the process from D3 Sankey chart using circle node instead of rectangle node, however, I would like to select only certain nodes to change from rectangles to circles.
For example, in this jsfiddle used in the example, how would you only select Node 4 and Node 7 to be converted to a circle?
I updated your fiddle.
Basically you just need some way to select the nodes that you want to make different. I used unique classname so that you can style them with CSS as well. I didn't feel like writing the code to select just 4 and 7 (I'm lazy) so I just selected all of the even nodes instead.
// add in the nodes
var node = svg.append("g").selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", function (d, i) { return i % 2 ? "node rect" : "node circle";
})
Then you can use that to select the nodes and add circles instead of rectangles.
svg.selectAll(".node.circle").append("circle")
.attr("r", sankey.nodeWidth() / 2)
.attr("cy", function(d) { return d.dy/2; })
.attr("cx", sankey.nodeWidth() / 2)
.style("fill", function (d) {
There is also another similar approach, illustrated in the following jsfiddle.
I started from this fiddle (from another SO question that you merntioned)), where all nodes had already been converted to circles:
Then I modified existing and added some new code that involves filtering during creation of circles:
// add the circles for "node4" and "node7"
node
.filter(function(d){ return (d.name == "node4") || (d.name == "node7"); })
.append("circle")
.attr("cx", sankey.nodeWidth()/2)
.attr("cy", function (d) {
return d.dy/2;
})
.attr("r", function (d) {
return Math.sqrt(d.dy);
})
.style("fill", function (d) {
return d.color = color(d.name.replace(/ .*/, ""));
})
.style("fill-opacity", ".9")
.style("shape-rendering", "crispEdges")
.style("stroke", function (d) {
return d3.rgb(d.color).darker(2);
})
.append("title")
.text(function (d) {
return d.name + "\n" + format(d.value);
});
// add the rectangles for the rest of the nodes
node
.filter(function(d){ return !((d.name == "node4") || (d.name == "node7")); })
.append("rect")
.attr("y", function (d) {
return d.dy/2 - Math.sqrt(d.dy)/2;
})
.attr("height", function (d) {
return Math.sqrt(d.dy);
})
.attr("width", sankey.nodeWidth())
.style("fill", function (d) {
return d.color = color(d.name.replace(/ .*/, ""));
})
.style("fill-opacity", ".9")
.style("shape-rendering", "crispEdges")
.style("stroke", function (d) {
return d3.rgb(d.color).darker(2);
})
.append("title")
.text(function (d) {
return d.name + "\n" + format(d.value);
});
Similar code had to be modified for accurate positioning text beside rectangles.
I believe the final result looks natural, even though it lost some of the qualities of the original Sankey (like wider connections).
I have created a force directed graph but I'm unable to add text to the links created.
How can I do so?
Following is my code link
I have used the following line to append the titles on the link's, but its not coming.
link.append("title")
.text(function (d) {
return d.value;
});
What am I doing wrong with this ?
This link contains the solution that you need.
The key point here is that "title" adds tooltip. For label, you must provide slightly more complex (but not overly complicated) code, like this one from the example from the link above:
// Append text to Link edges
var linkText = svgCanvas.selectAll(".gLink")
.data(force.links())
.append("text")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("x", function(d) {
if (d.target.x > d.source.x) {
return (d.source.x + (d.target.x - d.source.x)/2); }
else {
return (d.target.x + (d.source.x - d.target.x)/2); }
})
.attr("y", function(d) {
if (d.target.y > d.source.y) {
return (d.source.y + (d.target.y - d.source.y)/2); }
else {
return (d.target.y + (d.source.y - d.target.y)/2); }
})
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("dy", ".35em")
.text(function(d) { return d.linkName; });
The idea of the code is simple: It calculates the midpoint of the link, and displays some text at that place (you can decide what that text actually is). There are some additional calculations and conditions, you can figure it out from the code, however you'll anyway want to change them depending on your needs and aesthetics.
EDIT: Important note here is that "gLink" is the name of the class of links, previously defined with this code:
// Draw lines for Links between Nodes
var link = svgCanvas.selectAll(".gLink")
.data(force.links())
In your example, it may be different, you need to adjust the code.
Here is a guide how to incorporate solution from example above to another example of force layout that doesn't have link labels:
SVG Object Organization and Data Binding
In D3 force-directed layouts, layout must be supplied with array of nodes and links, and force.start() must be called. After that, visual elements may be created as requirements and desing say. In our case, following code initializes SVG "g" element for each link. This "g" element is supposed to contain a line that visually represent link, and the text that corresponds to that link as well.
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter()
.append("g")
.attr("class", "link")
.append("line")
.attr("class", "link-line")
.style("stroke-width", function (d) {
return Math.sqrt(d.value);
});
var linkText = svg.selectAll(".link")
.append("text")
.attr("class", "link-label")
.attr("font-family", "Arial, Helvetica, sans-serif")
.attr("fill", "Black")
.style("font", "normal 12px Arial")
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.text(function(d) {
return d.value;
});
"g" elements have class "link", lines have class "link-line", ad labels have class "link-label". This is done so that "g" elements may be easily selected, and lines and labels can be styled in CSS file conveninetly via classes "link-line" and "link-label" (though such styling is not used in this example).
Initialization of positions of lines and text is not done here, since they will be updated duting animation anyway.
Force-directed Animation
In order for animation to be visible, "tick" function must contain code that determine position of lines and text:
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; });
linkText
.attr("x", function(d) {
return ((d.source.x + d.target.x)/2);
})
.attr("y", function(d) {
return ((d.source.y + d.target.y)/2);
});
Here is the resulting example: plunker
Thanks to someone's help (Brandon), I've been able to add tooltips to the sunburst charts.
I am still looking for a way to display the label of a path on the sunburst chart (and then have the dual mode tooltip + text).
The example that I'd like to improve is provided on jsfiddle.net/trakkasure/UPqX5/
I am looking for the code to add to the following code section:
path = svg.data([getData()]).selectAll("path")
.data(partition.nodes)
.enter().append("svg:path")
.attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", magnify)
.on("mouseover", function(d) {
tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div> <div>'+d.value+'</div>')
})
.on('mouseout',function(){
tooltip.cleanup()
})
.each(stash);
And I'd like to see the labels as shown on the example is provided on http://bl.ocks.org/910126. I can not get that example to work for me (I'm still new to D3)
I do recognize that there might be too much text on that chart, but in my scenario it is not a problem.
Can someone help me understand how to display all these labels on the chart?
Simply append svg:text elements to the canvas:
path.append("svg:text")
.attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
.attr("x", function(d) { return d.y; })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) { return d.name; });
However, in my edit, this will break your magnify function, so i create an svg group to hold together each pair of path and text. In my opinion, elements are better organized this way, easier to query in the future.
Note that you need to modify your magnify function to also animate the text, as for now it only animate the path and leave the text at their original position.
group = svg.data([getData()]).selectAll("path")
.data(partition.nodes)
.enter().append('svg:g');
//path variable is required by magnify function
path = group.append("svg:path")
.attr("d", arc)
.style("fill", function(d) { return color((d.children ? d : d.parent).name); })
.on("click", magnify)
.on("mouseover", function(d) {
tooltip.show([d3.event.clientX,d3.event.clientY],'<div>'+d.name+'</div><div>'+d.value+'</div>')
})
.on('mouseout',function(){
tooltip.cleanup()
})
.each(stash);
// you may need to assign the result to a variable,
// for example to animate the text in your magnify function,
// as shown in the path variable above
group.append("svg:text")
.attr("transform", function(d) { return "rotate(" + (d.x + d.dx / 2 - Math.PI / 2) / Math.PI * 180 + ")"; })
.attr("x", function(d) { return d.y; })
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.text(function(d) { return d.name; });
Code was taken from your given example, however
I edited the x attribute into .attr("x", function(d) { return d.y; }) to properly position the text based on your data structure (the example uses Math.sqrt(d.y)). I also modify the text function to return d.name
here is the jsFiddle