Append sqrt sysmbol to svg chart generated by D3.js - javascript

I am trying to append a unit text to svg chart drew by d3.js.
svg.append("text")
.attr("y", margin.top-2)
.attr("x", margin.left+2)
.attr("dy", "1em")
.style("text-anchor", "start")
.text("Stress Intensity, MPa Sqrt(m)");
It looks like
How to insert a sqrt symbol and make it look like:
?
Thanks,

Related

d3.js v4: How to display an image after mouse click on a node

Still being rather inexperienced in using d3.js I have hit a road block.
Hoping anybody out there can help me.
I am trying to display a picture upon mouse click on a node in a graph.
Ideally, I'd like to click on several nodes and display images. Double click on a node should remove the image. And clicking on the background removes all displayed images. But one step at a time.
What I have done so far is:
Succeeded in using tooltips. I was also able to change the size of a circle node upon mouse clicking on it.
I used as toy project Mike Bostock's force-directed graph example: https://bl.ocks.org/mbostock/4062045 .
I am using d3.js v4
Based on an example on the web I was able to add pictures to all nodes:
Add different images for nodes in d3 v4 network graph
I tried to tailor this example to my needs. First I added:
var defs = svg.append('defs');
Further more:
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter()
.append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(node_drag)
.on("click", function(d){
defs.append("pattern")
.attr("x", 0)
.attr("y", 0)
.attr("width", 12)
.attr("height", 12)
.append("image")
.attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')
.attr("width", 12)
.attr("height", 12)
.attr("x", 0)
.attr("y", 0);
})
In my browser the html indicates that the image is added:
But the image is not showing in the browser.
At this point I am turning to you and hope for some hints how I can accomplish displaying an image as node upon clicking with my mouse cursor on it.
Any input is highly appreciated,
Markus
Your inspector is showing that the image was appended to the pattern, but it was never linked to the circle element.
Instead of appending the pattern to the defs inside the click function, you should just append the pattern with a given ID...
var defs = svg.append('defs');
defs.append("pattern")
.attr("x", 0)
.attr("y", 0)
.attr("id", "myPattern")//ID here
.attr("width", 12)
.attr("height", 12)
.append("image")
.attr("xlink:href", 'https://assets-cdn.github.com/images/modules/open_graph/github-octocat.png')
.attr("width", 12)
.attr("height", 12)
.attr("x", 0)
.attr("y", 0);
... and then, inside the click, just change the fill of the circle according to that ID:
.on("click", function() {
d3.select(this).attr("fill", "url(#myPattern)")
})
Here is Bostock's bl.ocks with those changes (I made the circles bigger so you can better see the image): https://bl.ocks.org/anonymous/0e653b6d21c8d57afa234d5d1765efe0/78ba15e533a2b8f8e6575a30d97b27d156ce2faf

d3 second force layout to avoid text overlap

I am trying to implement a force layout on D3 v4 with a large no. of nodes with labels. The problem is that the labels overlap and affects the readability. I found this example which is on v3 and implements something similar to what I want. How can I implement the same in v4?
http://bl.ocks.org/MoritzStefaner/1377729
var text = g.append("g")
.attr("class", "labels")
.selectAll("text")
.data(graph.nodes)
.enter().append("text")
.attr("class", "dataLabels")
.attr("font-size","6px")
.attr("dx", 6)
.attr("dy", ".15em");

Preemptive getBBox calculation

When there is an SVG element that is in the DOM, it's possible to get its bounding box using the getBBox function, as illustrated in this example:
http://bl.ocks.org/mbostock/1160929
Is it possible to get the bounding box without actually adding an element to the DOM?
In other words, can I calculate what the bounding box of some text would be if it was attached to certain node without actually attaching it?
The goal is to iteratively add labels to a graphic while avoiding overlapping text.
There is no way to calculate the height of a text before displaying it. The reason is that their might me many things that influence the height of the text (css classes, font present or not in the computer ...).
The easiest way to achieve it is to create the text hidden, get its height and then calculate the position.
How about
Adding the text
Get Bounds
Removing the text.
Something like this:
//add the text
var text = svg.append("text")
.attr("id", "text-to-remove")
.attr("x", 480)
.attr("y", 250)
.attr("dy", ".35em")
.attr("text-anchor", "middle")
.style("font", "300 128px Helvetica Neue")
.text("Hello, getBBox!");
//get bbox
var bbox = text.node().getBBox();
//remove the text
d3.select("#text-to-remove").remove();
//use bbox
var rect = svg.append("rect")
.attr("x", bbox.x)
.attr("y", bbox.y)
.attr("width", bbox.width)
.attr("height", bbox.height)
.style("fill", "#ccc")
.style("fill-opacity", ".3")
.style("stroke", "#666")
.style("stroke-width", "1.5px");
working code here
Hope this helps!

Convert text header of image appended to node in typical graph of nodes and link, to image in D3

I would like to add header to my nodes in d3. But instead of appending it as text I want to append it as image so that in graph scenario all lines will be below header and picture will look cleaner.
Currently because of many links picture looks messy which I want to avoid.
node.append('text')
.attr("class","label")
.attr("style","font-size:12px;")
.html(function(d){
return d.name;
}
})
.attr("x",0)
.attr("y",-radius);
Is there any way how to do this. I read about hidden canvas but not sure exactly how to use here as I am beginner in D3.
Thanks
You can append an image as well.
I've set up a fiddle here, to showcase a working example of appending an image(icon) inside a circle.
node.append("circle")
.attr("cursor","pointer")
.attr("cx", 200)
.attr("cy", 200)
.attr("r", 25)
.style("fill","white")
.style("stroke", "black")
.style("stroke-width", 2);
node.append("image")
.attr("xlink:href", "http://i.stack.imgur.com/bZXWH.png")
.attr("x", 185)
.attr("y", 185)
.attr("width", 32)
.attr("height", 32);
You might also find this tutorial helpful.

svg with javascript - axis labels

I am trying to label Y-axis of my graph using following code:
svg1.append("text").attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", 10)
.attr("dy", "-40")
.attr("transform", "rotate(-90)")
.text("life expectancy (years)");
But when I try to change the 'y' value to 50, the label moves towards right, I am not able to understand why it is so. Moreover what is "dy" for, and why there is no "x" attribute. :(
Please help.
you transform the default coordinate axes. i guess dy means dynamic-y and you can use x and dx.
http://www.w3.org/TR/SVG11/text.html#TSpanElementDXAttribute

Categories