We Keep Coding

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

D3.js: Align X-Axis to specific value on Y-Axis (e.g. the origin)

I want something a simple as this:
http://alex.nt.fh-koeln.de/Bilder/wlet1.jpg
The Axis are aligned to the origin. However, I could only figure out how to adjust the axis in terms of the width/height using transform:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height/2 + ")")
.call(xAxis);
This will put the X-axis in the middle of the graph, which is not necessarily the origin. I guess there is a simple solution, but I just can't seem to find it.

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

Adding rules to charts that use d3.svg.axis

I'm using a line chart that's essentially a copy of the code at http://bl.ocks.org/3883245. I would like to add horizontal rules to the graph, however when I try to access the calculated tick values via yAxis.tickValues() I only get a null response. Am I going about that correctly?

tickValues is used to set custom, externally determined tick positions. So if you let the axis choose the values then this property will properly be null.
The easiest way to add grid lines is actually to add another axis! In the example you linked immediately following the lines:
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
you can add the following to append a grid:
svg.append("g").attr("class", "xaxisgrid").call( xAxis.tickFormat("").tickSize(450) );
svg.select("g.xaxisgrid").selectAll(".tick")
.style('stroke', "#000")
.style('opacity', 0.4)
.filter(function(d, i){ return d3.select(this).classed('minor');} )
.style('opacity', 0.1);
svg.select("g.xaxisgrid .domain").style('fill', 'none');
The code is a bit rough, but should get you started. Basically I am slightly modifying the axis generation function(xAxis) to generate only ticks, and then I am making the ticks really long.

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