Separating out d3 Transitions from the rest of the code - javascript

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 ($)");

Related

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");

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.

d3 add line to existing plot

I'm creating scatterplots with D3 and want to superimpose some lines (a boxplot, eventually). I'm totally failing to append any line to the plots and don't get why. The code below is just one attempt of many.
I've searched and found various solutions, but haven't managed to get any of them to work. I'd be grateful of any help.
svg[i].selectAll(".dot")
.data(thedata)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 4.5)
.attr("cx", xMap)
.attr("cy", yMap)
.style("fill", "steelblue");
// Try to add arbitrary line
svg[i].append("line")
.attr("x1", 0)
.attr("x2", 3)
.attr("y1", 0)
.attr("y2", 4);
In case it's of interest, the use case is here: https://goo.gl/nbVfvu
Thanks
I think you are missing style attribute for the line, add style attribute for the line. Example as below.
svg[i]
.append("line")
.attr("x1",30)
.attr("y1",20)
.attr("x2",11)
.attr("y2",1)
.style("stroke", "black")

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.

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