neilos / bihisankey Goto Github PK
View Code? Open in Web Editor NEWA d3 javascript library/plugin for drawing bi-directional hierarchical sankey diagrams
A d3 javascript library/plugin for drawing bi-directional hierarchical sankey diagrams
I've been playing around with your example for the past couple of days and it has been working great. However it seems if you try to load in too many nodes the diagram won't render with no errors thrown. Im trying to load 135 nodes into two "type"s. If I don't include the "type" nodes it renders fine (if not a little messy) but trying to group into "type"s breaks it. Any help would be greatly appreciated.
As a node can have specific properties, I'd like to use these to 'force' the x and y position of a node to be within specific areas, based on node properties.
For exampe, if node.category="cat1", then x position can only be between 0 and 100 and y position between 0 and 100, whereas if node.category="cat4", then x can be between 100-200 and y between 100 and 200.
Although this might go against the nature of sankey diagrams to an extend, it will help to visualize the node categories by their relative positions. Is there a way to force min and max positions when calculating node X and node Y positions?
Hello. I'm sorry, but I really need your help. I have a week to read the code, and struggling with the task, but I can not understand how to do the following:
There's a schedule.
http://prntscr.com/755sr8
And I need to arrange such as node names in order, and that references to them were drawn. For example:
http://prntscr.com/755u1k
Followed by the name of the node.
Or, for example, I would like to add to the array data variable Level for each node. And it would be possible to put the node, depending on their Level
But I can not find how to do it and where you define how to display each node, and how to bring it to the link. Help me please. Thanks in advance.
Hey,
Those are my nodes and links.
`var exampleNodes = [
{ "type": "Asset", "id": "a", "parent": null, "name": "Assets" },
{ "type": "Expense", "id": "ex", "parent": null, "number": "ex", "name": "Expenses" }
]
var exampleLinks = [
{ "source": "ex", "target": "a", "value": 10 },
{ "source": "ex", "target": "a", "value": 10 }
]`
I need to create two links from the same source to the same target, but I need to show each of them as a link.
I saw in 'bihisankey.js' that there is a 'mergeLinks' function.
Can I unmerge the links?
Thanks, Chen.
I double clicked node but it cannot expand. Thanks~
When defining a large data set of nodes with many children and sub children nodes (>10,000: a parent can have 20 children and each of those children can have 20 and so on), if you want to add links in small amounts, say connecting great-great-great grandchildren 10 at a time. The nodes and links are created but they are placed below the the HEIGHT of the svg. Should there be a check to make sure that the lowest y position is not outside the HEIGHT.
Is it possible when collapsing a parent node for it to stay at the same place (not to transform into a circle and go to the upper left corner), and its children to show up next to (or under) it, all linked to the parent node?
Thank you in advance.
Hey Neil! This is in regards to https://gist.github.com/Neilos/584b9a5d44d5fe00f779. Thanks very much for putting that together -- it's exactly what I've been looking for. Artificer (artificer.jboss.org) will be using it to visualize bi-directional relationships between artifacts...
One bug I came across: every single instance of mouseenter
and mouseleave
need to have their actions blocked when showHideChildren
is running. If you use TRANSITION_DURATION
with its default (and therefor animate the transitions), the actions you do within mouseenter
and mouseleave
must wait until the animation is finished. Without it, try double clicking one of your nodes and quickly mouseover something while it transitions. It'll end up with really screwy results.
I added a isTransitioning
global var, defaulted to false. The logic within each mouseenter
and mouseleave
function is surrounded with if (!isTransitioning)
. showHideChildren
looks like:
function showHideChildren(node) {
isTransitioning = true;
hideTooltip();
if (node.state === "collapsed") { expand(node); }
else { collapse(node); }
biHiSankey.relayout();
updateRelationshipVisualization();
link.attr("d", path);
restoreLinksAndNodes();
// Don't allow mouseenters to work until the transition animation is finished.
setTimeout(function(){
isTransitioning = false;
}, TRANSITION_DURATION);
}
Hey,
At the new version of chrome (Version 58.* (64-bit)), the function double click (to show and hide children) - not working anymore.
At Version 57.* (64-bit) it's working great.
In explorer it's working great too.
Why does it's happend?
Thanks.
I want to customize the node shape from default rectangle to my own custom shape for example Right Chervon.
I have been trying to understand how the distance between nodes is calculated. In my case, the distance is very large and I would like to move the nodes closer together. I looked at nodeSpacing and linkSpacing but they do not seem to have any impact on the layout.
I have included my node and link data below.
var exampleNodes = [
// Ingestion Zone
{"type":"Ingest","id":"in","parent":null,"name":"Ingestion"},
{"type":"Ingest","id":2,"parent":"in","name":"Product A"},
{"type":"Ingest","id":3,"parent":"in","name":"Product B"},
{"type":"Ingest","id":4,"parent":"in","name":"Product C"},
{"type":"Ingest","id":5,"parent":"in","name":"Product D"},
// Collocation Zone
{"type":"Collocation","id":"cl","parent":null,"name":"Collocation"},
// Unity Collocation phase 1
{"type":"Collocation","id":"cl1","parent":"cl","name":"Collocation1"},
{"type":"Collocation","id":"cl1mr4","parent":"cl1","name":"MR4"},
{"type":"Collocation","id":"cl1kh","parent":"cl1","name":"KH-KHp"},
{"type":"Collocation","id":8,"parent":"cl1mr4","name":"MR4-XML"},
{"type":"Collocation","id":9,"parent":"cl1kh","name":"KH-System"},
{"type":"Collocation","id":10,"parent":"cl1kh","name":"KH-DiskDpe"},
{"type":"Collocation","id":11,"parent":"cl1kh","name":"KH-DiskDae"},
{"type":"Collocation","id":12,"parent":"cl1kh","name":"KH-Dpe"},
{"type":"Collocation","id":13,"parent":"cl1kh","name":"KH-Dae"},
{"type":"Collocation","id":14,"parent":"cl1kh","name":"KH-Pool"},
{"type":"Collocation","id":15,"parent":"cl1kh","name":"KH-Software"},
// Unity Collocation phase 2
{"type":"Collocation","id":"cl2","parent":"cl","name":"Collocation2"},
{"type":"Collocation","id":"cl2mr4","parent":"cl2","name":"MR4"},
{"type":"Collocation","id":"cl2kh","parent":"cl2","name":"KH"},
{"type":"Collocation","id":"cl2khp","parent":"cl2","name":"KHplus"},
{"type":"Collocation","id":35,"parent":"cl2mr4","name":"MR4-XML"},
{"type":"Collocation","id":21,"parent":"cl2kh","name":"KH-System"},
{"type":"Collocation","id":22,"parent":"cl2kh","name":"KH-DiskDpe"},
{"type":"Collocation","id":23,"parent":"cl2kh","name":"KH-DiskDae"},
{"type":"Collocation","id":24,"parent":"cl2kh","name":"KH-Dpe"},
{"type":"Collocation","id":25,"parent":"cl2kh","name":"KH-Dae"},
{"type":"Collocation","id":26,"parent":"cl2kh","name":"KH-Pool"},
{"type":"Collocation","id":27,"parent":"cl2khp","name":"KH-Software"},
{"type":"Collocation","id":28,"parent":"cl2khp","name":"KHp-System"},
{"type":"Collocation","id":29,"parent":"cl2khp","name":"KHp-DiskDpe"},
{"type":"Collocation","id":30,"parent":"cl2khp","name":"KHp-DiskDae"},
{"type":"Collocation","id":31,"parent":"cl2khp","name":"KHp-Dpe"},
{"type":"Collocation","id":32,"parent":"cl2khp","name":"KHp-Dae"},
{"type":"Collocation","id":33,"parent":"cl2khp","name":"KHp-Pool"},
{"type":"Collocation","id":34,"parent":"cl2khp","name":"KHp-Software"},
// Data transformation
{"type":"Transform","id":"tr","parent":null,"name":"Transform"},
{"type":"Transform","id":36,"parent":"tr","name":"MR4-Software"},
{"type":"Transform","id":37,"parent":"tr","name":"MR4-Disks"},
{"type":"Transform","id":38,"parent":"tr","name":"MR4-GlobalPools"},
// Data Zone
{"type":"DataProcess","id":"dp","parent":null,"name":"DataProcessing"},
// Extract
{"type":"DataProcess","id":"ex","parent":"dp","name":"Extract"},
{"type":"DataProcess","id":"exmr4","parent":"ex","name":"MR4"},
{"type":"DataProcess","id":"exkh","parent":"ex","name":"KH"},
{"type":"DataProcess","id":"exkhp","parent":"ex","name":"KHplus"},
{"type":"DataProcess","id":40,"parent":"exmr4","name":"MR4-Software"},
{"type":"DataProcess","id":41,"parent":"exmr4","name":"MR4-Disks"},
{"type":"DataProcess","id":42,"parent":"exmr4","name":"MR4-GlobalPools"},
{"type":"DataProcess","id":43,"parent":"exkh","name":"KH-System"},
{"type":"DataProcess","id":44,"parent":"exkh","name":"KH-DiskDpe"},
{"type":"DataProcess","id":45,"parent":"exkh","name":"KH-DiskDae"},
{"type":"DataProcess","id":46,"parent":"exkh","name":"KH-Dpe"},
{"type":"DataProcess","id":47,"parent":"exkh","name":"KH-Dae"},
{"type":"DataProcess","id":48,"parent":"exkh","name":"KH-Pool"},
{"type":"DataProcess","id":49,"parent":"exkhp","name":"KH-Software"},
{"type":"DataProcess","id":50,"parent":"exkhp","name":"KHp-System"},
{"type":"DataProcess","id":51,"parent":"exkhp","name":"KHp-DiskDpe"},
{"type":"DataProcess","id":52,"parent":"exkhp","name":"KHp-DiskDae"},
{"type":"DataProcess","id":53,"parent":"exkhp","name":"KHp-Dpe"},
{"type":"DataProcess","id":54,"parent":"exkhp","name":"KHp-Dae"},
{"type":"DataProcess","id":55,"parent":"exkhp","name":"KHp-Pool"},
{"type":"DataProcess","id":56,"parent":"exkhp","name":"KHp-Software"},
// Clean
{"type":"DataProcess","id":"cln","parent":"dp","name":"Clean"},
{"type":"DataProcess","id":"clnmr4","parent":"cln","name":"MR4"},
{"type":"DataProcess","id":"clnkh","parent":"cln","name":"KH"},
{"type":"DataProcess","id":"clnkhp","parent":"cln","name":"KHplus"},
{"type":"DataProcess","id":60,"parent":"clnmr4","name":"MR4-Software"},
{"type":"DataProcess","id":61,"parent":"clnmr4","name":"MR4-Disks"},
{"type":"DataProcess","id":62,"parent":"clnmr4","name":"MR4-GlobalPools"},
{"type":"DataProcess","id":63,"parent":"clnkh","name":"KH-System"},
{"type":"DataProcess","id":64,"parent":"clnkh","name":"KH-DiskDpe"},
{"type":"DataProcess","id":65,"parent":"clnkh","name":"KH-DiskDae"},
{"type":"DataProcess","id":66,"parent":"clnkh","name":"KH-Dpe"},
{"type":"DataProcess","id":67,"parent":"clnkh","name":"KH-Dae"},
{"type":"DataProcess","id":68,"parent":"clnkh","name":"KH-Pool"},
{"type":"DataProcess","id":69,"parent":"clnkhp","name":"KH-Software"},
{"type":"DataProcess","id":70,"parent":"clnkhp","name":"KHp-System"},
{"type":"DataProcess","id":71,"parent":"clnkhp","name":"KHp-DiskDpe"},
{"type":"DataProcess","id":72,"parent":"clnkhp","name":"KHp-DiskDae"},
{"type":"DataProcess","id":73,"parent":"clnkhp","name":"KHp-Dpe"},
{"type":"DataProcess","id":74,"parent":"clnkhp","name":"KHp-Dae"},
{"type":"DataProcess","id":75,"parent":"clnkhp","name":"KHp-Pool"},
{"type":"DataProcess","id":76,"parent":"clnkhp","name":"KHp-Software"},
// Align
{"type":"DataProcess","id":"al","parent":"dp","name":"Align"},
{"type":"DataProcess","id":77,"parent":"al","name":"System"},
{"type":"DataProcess","id":78,"parent":"al","name":"Disk"},
{"type":"DataProcess","id":79,"parent":"al","name":"Pool"},
// Analyze
{"type":"Analytics","id":"an","parent":null,"name":"Analytics"},
{"type":"Analytics","id":80,"parent":"an","name":"ManagedSystems"},
{"type":"Analytics","id":81,"parent":"an","name":"ManagedSystemDetails"},
{"type":"Analytics","id":82,"parent":"an","name":"SystemCap"},
{"type":"Analytics","id":83,"parent":"an","name":"SystemCapTier"},
// Insert
{"type":"Insert","id":"is","parent":null,"name":"Insert"},
{"type":"Insert","id":90,"parent":"is","name":"ManagedSystems"},
{"type":"Insert","id":91,"parent":"is","name":"ManagedSystemDetails"},
{"type":"Insert","id":92,"parent":"is","name":"SystemCap"},
{"type":"Insert","id":93,"parent":"is","name":"SystemCapTier"},
]
var exampleLinks = [
// Ingestion to Collocation
{"source":3,"target":8,"value":1},
{"source":3,"target":9,"value":1},
{"source":3,"target":10,"value":1},
{"source":3,"target":11,"value":1},
{"source":3,"target":12,"value":1},
{"source":3,"target":13,"value":1},
{"source":3,"target":14,"value":1},
{"source":3,"target":15,"value":1},
{"source":9,"target":21,"value":1},
{"source":10,"target":22,"value":1},
{"source":11,"target":23,"value":1},
{"source":12,"target":24,"value":1},
{"source":13,"target":25,"value":1},
{"source":14,"target":26,"value":1},
{"source":15,"target":27,"value":1},
{"source":9,"target":28,"value":1},
{"source":10,"target":29,"value":1},
{"source":11,"target":30,"value":1},
{"source":12,"target":31,"value":1},
{"source":13,"target":32,"value":1},
{"source":14,"target":33,"value":1},
{"source":15,"target":34,"value":1},
// Phase 2
{"source":8,"target":35,"value":1},
// MR4 Transforation
{"source":35,"target":36,"value":1},
{"source":35,"target":37,"value":1},
{"source":35,"target":38,"value":1},
// Extract
{"source":36,"target":40,"value":1},
{"source":37,"target":41,"value":1},
{"source":38,"target":42,"value":1},
{"source":21,"target":43,"value":1},
{"source":22,"target":44,"value":1},
{"source":23,"target":45,"value":1},
{"source":24,"target":46,"value":1},
{"source":25,"target":47,"value":1},
{"source":26,"target":48,"value":1},
{"source":27,"target":49,"value":1},
{"source":28,"target":50,"value":1},
{"source":29,"target":51,"value":1},
{"source":30,"target":52,"value":1},
{"source":31,"target":53,"value":1},
{"source":32,"target":54,"value":1},
{"source":33,"target":55,"value":1},
{"source":34,"target":56,"value":1},
// Clean and Interpret
{"source":40,"target":60,"value":1},
{"source":41,"target":61,"value":1},
{"source":42,"target":62,"value":1},
{"source":43,"target":63,"value":1},
{"source":44,"target":64,"value":1},
{"source":45,"target":65,"value":1},
{"source":46,"target":66,"value":1},
{"source":47,"target":67,"value":1},
{"source":48,"target":68,"value":1},
{"source":49,"target":69,"value":1},
{"source":50,"target":70,"value":1},
{"source":51,"target":71,"value":1},
{"source":52,"target":72,"value":1},
{"source":53,"target":73,"value":1},
{"source":54,"target":74,"value":1},
{"source":55,"target":75,"value":1},
{"source":56,"target":76,"value":1},
// Align
{"source":60,"target":77,"value":1},
{"source":61,"target":78,"value":1},
{"source":62,"target":79,"value":1},
{"source":63,"target":77,"value":1},
{"source":64,"target":78,"value":1},
{"source":65,"target":78,"value":1},
{"source":66,"target":78,"value":1},
{"source":67,"target":78,"value":1},
{"source":68,"target":79,"value":1},
{"source":69,"target":77,"value":1},
{"source":70,"target":78,"value":1},
{"source":71,"target":78,"value":1},
{"source":72,"target":78,"value":1},
{"source":73,"target":78,"value":1},
{"source":74,"target":78,"value":1},
{"source":75,"target":79,"value":1},
{"source":76,"target":77,"value":1},
// Analyze
{"source":77,"target":80,"value":1},
{"source":77,"target":81,"value":1},
{"source":78,"target":82,"value":1},
{"source":78,"target":83,"value":1},
{"source":79,"target":82,"value":1},
{"source":79,"target":83,"value":1},
// Insert
{"source":80,"target":90,"value":1},
{"source":81,"target":91,"value":1},
{"source":82,"target":92,"value":1},
{"source":83,"target":93,"value":1},
]
Hello. How can I do so that the nodes were arranged in order and not chaotic? How they are sorted, I can not find in your code the moment. Thank you very much.
When I use the latest version of D3 with the tag: <script src="https://d3js.org/d3.v4.min.js"></script>
I have an error in app.js line 70: d3.scale is undefined
.
This looks really cool. As it stands it would be a copyright violation for me to use it without a license. Is there one you'd like to use? (MIT? GNU? Apache? Public Domain?)
Noticed that some of my values were coming back as scientific notation (ie 1.111111111 e47). In the mergeLinks() function, where value is being assigned, I cast both previousLink.value and currentLink.value to ints using parseInt, which seems to have fixed the issue.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.