Hi,

I have tried to use two vizuly trees on the same page, but only one is clickable. I cannot toggle both

Here is my code,
In index.html
=============

Here I have created two divs,

<div class=”container” style=”width:100%”>
<div id=”viz_container” class=”z-depth-3″>
</div>
</div>

<div class=”container” style=”width:100%”>
<div id=”viz_container1″ class=”z-depth-3″>
</div>
</div>
</div>

<script>

viz_container = d3.selectAll(“#viz_container”)
.style(“width”, screenWidth + “px”)
.style(“height”, screenHeight + “px”);

viz_container1 = d3.selectAll(“#viz_container1”)
.style(“width”, screenWidth + “px”)
.style(“height”, screenHeight + “px”);

//here I am calling two functions for the data

loadData();
loadData1();
</script>

In weightedtree.js (This is the first js file for tree 1)
==================

function loadData() {
data.values = prepData(some parameters);
initialize();
}

function initialize() {
viz = vizuly.viz.weighted_tree(document.getElementById(“viz_container”)); //here I have passed viz_container id.

theme = vizuly.theme.weighted_tree(viz).skin(vizuly.skin.WEIGHTED_TREE_AXIIS);

viz.data(data)
.width(600)
.height(600)
.children(function(d) {
return d.values
})
.key(function(d) {
return d.id
})
.value(function(d) {
return Number(10);
})
.fixedSpan(-1)
.label(function(d) {
return trimLabel(d.key)
})
.on(“measure”, onMeasure)
.on(“mouseover”, onMouseOver)
.on(“mouseout”, onMouseOut)
.on(“click”, onClick);

changeSize(d3.select(“#currentDisplay”).attr(“item_value”));

// Open up some of the tree branches.
viz.toggleNode(data.values[0]);
}

function onClick(g, d, i) {
viz.toggleNode(d);
}

In weighted_tree1.js
==================== (This is the second js file for tree 2. I have copied the above code and just changed the container id and some function names )

function loadData1() { //loading different data
data.values = prepData1(some parameters);
initialize1();
}

function initialize1() {
viz = vizuly.viz.weighted_tree(document.getElementById(“viz_container1”)); //passing the second div’s id

theme = vizuly.theme.weighted_tree(viz).skin(vizuly.skin.WEIGHTED_TREE_AXIIS);

viz.data(data) // Expects hierarchical array of objects.
.width(600) // Width of component
.height(600) // Height of component
.children(function(d) {
return d.values
})
.key(function(d) {
return d.id
})
.value(function(d) {
return Number(10);
})
.fixedSpan(-1) // fixedSpan > 0 will use this pixel value for horizontal spread versus auto size based on viz width
.label(function(d) {
return trimLabel(d.key)
})
.on(“measure”, onMeasure1)
.on(“mouseover”, onMouseOver1)
.on(“mouseout”, onMouseOut1)
.on(“click”, onClick1);

changeSize(d3.select(“#currentDisplay”).attr(“item_value”));

// Open up some of the tree branches.
viz.toggleNode(data.values[0]);
}

//We can capture click events and respond to them
function onClick1(g, d, i) {
viz.toggleNode(d);
}

Note: I have created two functions but used the same variable viz. Tried using viz1 but didn’t work !

Need: Both trees are to be independent. They are being loaded with different sets of data.

Issues:

1) Only one of the trees is being clickable. In both the onClick and onClick1 functions, I have the same code viz.toggleNode.

I have tried giving different names like

viz1 = vizuly.viz.weighted_tree(document.getElementById(“viz_container1”));
viz1.data;
viz1.toggleNode;

but this didnot work. Always throws an error, cannot set depth of undefined at function g() in vizuly_weightedtree.min.js
at var b = D(r).reverse() // here r is undefined

2) I have tried using another approach, having two functions
viz = vizuly.viz.weighted_tree(“viz_container”) and
viz1 = vizuly.viz.weighted_tree1(“viz_container1”). One for each tree.

It said vizuly.viz.weighted_tree is not a function.

Please let me know the best possible way to draw two decision trees on one page and both should be toggled independently.

Note: the mouseover, mouseout functions are working independently for each tree flawlessly.
Only the onClick function is not fully functional. Please help me at your earliest convenience.
Note: I have used only one “Vizuly_core.min.js” in common for both the trees.

Thank You.
Expecting an early reply from you.

Regards,
Pavan