Comments (8)
Hi, your question is valid, but why whould you want for JSONconfig.getID
to reset?
from treant-js.
I'm able to use multiple trees on a page without any problem.
Just call new Treant ... multiple times on different configurations.
from treant-js.
scrobbleme, can you post your javascript code? I can't be able to initialize two diagrams in the same page
from treant-js.
@leolr02 Yes, see this page: http://stammbaum.dev.moewe.io/family-tree/persons/johann-caspar-goethe/
oder http://stammbaum.dev.moewe.io
There are 3 treant trees (even the single person card is one)
- For configuring the trees, the JSON structure is used (just look into the pages source)
Initialization is done with a simpe JavaScript:
jQuery(function (jQuery) {
var charts = jQuery('.stammbaum-chart');
charts.each(create_treant);
function create_treant(index, element) {
element = jQuery(element);
var person = element.attr('data-person');
element.data('treant', new Treant(window.stammbaum['person-hierarchy-' + person], align_graph));
}
function align_graph(tree) {
var tree_container = jQuery(tree.drawArea);
var wrapper = tree_container.parent();
var element = tree_container.find('.node').last();
tree.drawArea.scrollLeft = parseInt(element.css('left')) - ((wrapper.width() - element.width()) / 2);
}
});
align_graph
is just use to center the graph on the root node.
The main part is just muliple calls to new Treant(configuration)
So really nothing special.
from treant-js.
thanks is more clearly for me!!! , have a nice day 👍
from treant-js.
This is not working for me :/
from treant-js.
@Mixone-FinallyHere What exactly is not working? Or better: What is happening, are there any (JavaScript) error? Do you have an example online.
from treant-js.
I have this same problem.
<script>
/* first tree */
config = { container: "#basic-example"};
parent_node = { text: { name: "First parent node" } };
first_child = { parent: parent_node, text: { name: "First child" }};
second_child = { parent: parent_node, text: { name: "Second child" }};
simple_chart_config = [ config, parent_node, first_child, second_child ];
var chart = new Treant( simple_chart_config );
/* Here tree shows all 3 nodes */
/* Second tree same container */
config2 = { container: "#basic-example"};
parent_node2 = { text: { name: "Second parent node" } };
first_child2 = { parent: parent_node2, text: { name: "First child 2" }};
second_child2 = { parent: parent_node2, text: { name: "Second child 2" }};
simple_chart_config2 = [ config2, parent_node2, first_child2, second_child2 ];
chart = new Treant( simple_chart_config2 );
/* Here tree shows only root node*/
</script>
I think that bug could be in JSONconfig.getId() or in JSONconfig.findChildren().
findChildren: function(nodes) {
var parents = [0]; // start with a a root node
...
New Treant doesn't reset the i variable so when next Treant is created, the id of root node isn't 0 and findChildren() fails.
I hope this comment can help you.
from treant-js.
Related Issues (20)
- the chart is loaded one time and the next chart is not loaded properly. HOT 1
- Contact me inside collapsible node not working HOT 1
- how to add text on the connect edge? HOT 1
- keep collapsible state on refresh HOT 1
- Connector over connector problem HOT 1
- Is a chart created using treant.js able to be made responsive? HOT 1
- Show text on arrow HOT 1
- over 100 nodes HOT 2
- react-native app HOT 1
- Doesn't work on NPM HOT 2
- subTeeSeparation HOT 1
- How to add a "marriage" node and connector? HOT 2
- Browser error when load 20000 nodes. HOT 3
- Align children
- Bug: text.data-foo doesn't work for JSON format HOT 2
- How to add node to top of clicked node HOT 1
- Compiling LaTeX in Treant nodes
- collapsable - Error when there is a lot of json data
- Fork with moving from javascript to typescript [RELEASE IS PUBLISHED] HOT 1
- Repaint when tree is hidden
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from treant-js.