score:0
having just run into this and it being particularly non-trivial, there's an abstraction of d3-sankey
(unfortunately not drop-in) that allows you to set arbitrary orders (as well as do lots of other non-standard things like groups and cycles):
var layout = d3.sankey()
.extent([[100, 10], [840, 580]]);
var diagram = d3.sankeydiagram()
.linkcolor(function(d) { return d.color; });
d3.json('uk_energy.json', function(energy) {
layout.ordering([
[
[
"supply^indigenous",
"supply^imports"
],
[],
[]
],
[
[
"primary^natural gas",
"primary^bioenergy & waste",
"primary^coal",
"primary^manufactured fuel",
"primary^primary electricity",
"primary^electricity",
"primary^petroleum products",
"primary^primary oils"
],
[
"stocks^*"
],
[]
],
[
[
"transfers^*",
"transform^power stns",
"transform^other transform",
"transform^refineries"
],
[],
[
"sink^*"
]
],
[
[
"secondary^natural gas",
"secondary^bioenergy & waste",
"secondary^coal",
"secondary^electricity",
"secondary^manufactured fuel",
"secondary^heat sold",
"secondary^petroleum products"
],
[
"own use^*"
],
[
"loss^*"
]
],
[
[
"use1^other",
"use1^industry",
"use1^transport"
],
[],
[]
],
[
[
"use^domestic",
"use^public administration",
"use^commercial",
"use^agriculture",
"use^miscellaneous",
"use^unclassified",
"use^iron and steel",
"use^non-ferrous metals",
"use^mineral products",
"use^chemicals",
"use^mechanical engineering etc",
"use^electrical engineering etc",
"use^vehicles",
"use^food, beverages etc",
"use^textiles, leather etc",
"use^paper, printing etc",
"use^other industries",
"use^construction",
"use^air",
"use^rail",
"use^road",
"use^national navigation"
],
[],
[]
]
]
);
d3.select('#sankey')
.datum(layout(energy))
.call(diagram);
});
according to the docs:
if ordering is specified, sets the node ordering to the specified value and returns this layout. if ordering is not specified, return the current value, which defaults to null.
when ordering is null, the node ordering will be calculated automatically.
when ordering is specified, it is used directly and no rank assignment or ordering algorithm takes place. the ordering structure has three nested lists: ordering is a list of layers, each of which is a list of bands, each of which is a list of node ids.
afaict, the carets (^
) in the example denote groupname^nodename
.
this might not be particularly helpful if you're deep into a project already, but if starting one from scratch this would probably be my first port of call.
score:3
below steps can be used to create sankey with custom node order.
let data = {nodes:[],links:[]}
function to order/sort all nodes
const sankey = d3.sankey()
.size(graphsize)
.nodeid(d => d.id)
.nodewidth(nodewidth)
.nodepadding(0.5)
.nodealign(nodealignment)
.nodesort(null) //creates sankey nodes as ordered in the data
let graph = sankey(data)
score:5
if you set the layout iterations
value to zero you'll get the nodes in their alphabetical (by name) order: that worked well enough for me.
var sankey = d3.sankey()
.nodewidth(36)
.nodepadding(40)
.size([width, height])
.layout(0); /* <<<<<<< setting the iterations to zero */
score:6
removing the following line from the resolvecollisions() function in the sankey.js file will stop the order of the nodes from changing:
function resolvecollisions() {
...
// nodes.sort(ascendingdepth); // commented this out to prevent node reordering
...
}
the nodes will then be ordered vertically by however they are originally populated. so if you sort the nodes first before pushing the data, they will appear in sorted order.
Source: stackoverflow.com
Related Query
- Ordering nodes in d3 sankey diagram
- How to change alignment of nodes in a Sankey diagram using D3?
- How to make nodes in sankey diagram clickable using d3.js library
- d3.js sankey diagram - using multi dime array as nodes
- Vertical sort of nodes in D3 Sankey diagram
- Pushing left labels to the left of the nodes in Sankey diagram
- Sankey diagram transition
- Gradient along links in D3 Sankey diagram
- Sankey diagram in R
- D3: How to create a circular flow / Sankey diagram with 2 arcs
- Large data set breaks d3 sankey diagram
- Own colour range for Sankey Diagram with networkD3 package in R
- Sankey-diagram PowerBI custom visual with color nodes and ordering
- How to assign the x-axis position of a node in a Sankey Diagram (D3) from the json file
- How to align text vertically on a node within a Sankey diagram (D3.JS)?
- Change node colors in d3 Sankey Diagram based on additional column in data
- Maintaining relative ordering when adding nodes to a layered graph in Dagre
- D3: Tree diagram with images and circles as nodes
- Donut chart in D3 JS Sankey diagram
- How can I add images in the nodes of a D3 Sankey diagram, using the rcv and networkD3 packages in R?
- D3.js Sankey diagram: Add title (text) above each column of nodes
- Collapsible Sankey Diagram - D3
- How can I add axis labels to a sankey diagram in d3?
- Adding and removing nodes and links from force diagram in d3 based on filter dropdown
- Adding Multiple shaped nodes to a force directed network diagram in d3v4
- Color links same as origin nodes for a d3 sankey plot
- How to convert table data to nodes and links for d3js Sankey
- Set custom x, y position of nodes and their children in d3 tree diagram
- How to add a second value to the links of a Sankey diagram in d3.jS :
- NetworkD3 Sankey Plot in R: How to switch text labels from the right to the left of the inner nodes only
More Query from same tag
- how to put dynamic data text inside rectangle in d3
- Draw graph for child nodes on click of the node of tree pattern in d3.js
- networkD3 in R -> Set Initial Zoom in forceNetwork()
- DB and D3 connection via php. Unable to complete D3noob's tutorial
- canĀ“t run d3js example for ionic 2
- 3d fisheye - how to make bars wider on mouseover?
- Draw new graph on selection of new variable from drop down menu and/or radio button change
- Force directed graphs in d3v4
- D3 tree graph with links
- In d3 what does the construct .data([]).exit().remove() mean?
- How to get background color of SVG converted properly into Canvas
- Change node colors in d3 Sankey Diagram based on additional column in data
- Why is the vertical scrollbar always visible
- show additional data properties on mouseover in dc.js
- How can I specify a domain x-axis in NVD3 lineChart
- Nivo bar chart axis labels overlapping
- D3.js combining bar and line chart
- D3.js Angular CLI, Scope lost in tick() method
- change link thickness of link d3 tree on button click
- D3 bullet chart and ie8
- LeafletJs only show one country
- find target's target i.e friend of friend in force directed graph
- Adding Multiple graphs to one page with D3
- Using vanilla JS selectors with D3.js
- D3.js.nest rollup with cumulative sum using reduce
- I get an error on my .enter() d3
- D3.js change width of container after it is drawn
- javascript: how do I fix a 'not a function' error in an anonymous function?
- d3 time scale gives me a NaN
- dc.js - Tooltips adding another item?