We Keep Coding

Append sqrt sysmbol to svg chart generated by D3.js

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,

How to make sure labels in a force-directed graph do not get covered up?

I am making a very basic force-directed graph with labels using the d3.js library. Here is part of my code:
var node = d3.select("#canvas").selectAll(".node")
.data(data_nodes)
.enter()
.append("g")
.attr("class","node");
var nodes = node.append("circle")
.style("fill","green")
.style("r",10);
var text = node.append("text")
.attr("dx", 20)
.attr("dy", ".35em")
.style("z-index",1)
.text(function(d){
return d.name;
});
This goes well at the beginning but due to the shifting location of nodes that occurs with the ticking, these text elements that are supposed to serve as labels get covered up by other nodes. I would like to know if there is a way to solve this problem.

html in d3.js text tag

I have an axis:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width / 2)
.attr("y", 50)
.style("text-anchor", "center")
.text("pdot [×10<sup>-15</sup> ss<sup>-1</sup>]");
but apparently the label is rendered 'as is'. Changing the last line to
.html("pdot [×10<sup>-15</sup> ss<sup>-1</sup>]");
still does not produce what I want. How to make text tag display processed html? I'm looking for general solution that will allow me to put any html code into the label. However, the best would be the way to use LaTeX. Is it possible? How?

You can use a foreignObject for that, see e.g. http://bl.ocks.org/mbostock/1424037.

Why does d3 axis class name change axis format?

Here's a D3? .js? puzzler I ran into over the weekend. I have a y-axis that is changing format according to the class name that is used when i set the y axis attribute on a group that I append to the the svg object. Details that might affect it are as follows:
creating the y axis object:
var y = d3.scale.ordinal()
.domain(d3.range(ydomain.length))
.rangeRoundBands([2, height],0.08);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickValues(ydomain);
Attaching the y axis:
svg.append("g")
.attr("class", "**y-axis**")
.call(yAxis)
.append("text")
.attr("y", -17)
.attr("dy", ".71em")
.style("text-anchor", "middle")
.style("font-size", "16px")
.attr("transform", "translate(5,0), rotate(0)")
.text("Keywords")
;
The bold "y-axis" is the part that triggers the funny behavior. If I name it as: "y axis", I get this:
BUT if I use "y-axis" as above, the formatting changes to this:
The bolded line appears rather than the axis with small tick marks. Both versions of class name "y axis","y-axis" seem to be valid, both call the yAxis object, and this is the first time in the code that these class names are used. So what's the fundamental cause of this behavior? I think there's some web dev 101 stuff I'm not getting so simple and basic explanations are much appreciated.

"y axis" is a class with associated styling that gives you the thin line with the tickmarks. "y-axis" has no such styling and is drawing your y-axis line according to some other styling property not intended for axis styling.

Separating out d3 Transitions from the rest of the code

I'm new to java script and d3 and am trying to get my head around transitioning. Would anyone be able to explain why the last segment of code (below) will not work? That is to say when I tie a .transition statement with the original svg call the line transitions fine. But when I transition the yaxis name from "price($)" to "New Price($)" separately nothing happens.
The reason I ask is I'd like to separate the transition call for the line path as well, but if I can't get the axis name to work I don't think I have much hope of the path transition working.
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line)
.transition()
.duration(1000)
.attr("d",line2);
svg.append("g")
.transition()
.duraction(1000)
.text("New Price ($)");