I am attempting to customize the D3 sankey example provided at this link:
http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13
My goal is to adjust the vertical position of each node to a specific location (in this case, 300px).
One approach I have thought of to achieve this modification is to repurpose the dragmove() function to execute after all SVG elements have been added. In this process, I have modified the d.y value in order to shift it to 300px:
function dragmove(d) {
d3.select(this).attr("transform",
"translate(" + d.x + "," + (
d.y = 300
) + ")");
sankey.relayout();
link.attr("d", path);
}
This function is triggered during the addition of nodes:
var node = svg.append("g").selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")"; })
.call(d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", function() {
this.parentNode.appendChild(this); })
.on("drag", dragmove));
Currently, the shifting to 300px occurs as intended upon the specified mouse event, but my objective is for it to automatically shift after all SVG elements have been added.
Simply employing .call() without the mouse event does not produce the desired outcome.
I have also experimented with integrating the shift directly in var node:
return "translate(" + d.x + "," + 300 + ")"; })
However, this results in a misalignment between the links and the nodes, and invoking sankey.relayout() does not seem to resolve this discrepancy.