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
Related
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,
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.
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!
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.
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 ($)");