-
ismail atkurtApril 10, 2016 at 9:49 am #6094
I am trying to use your weighted tree component. But I stuck with the data structure. I really confused and having trouble to understand your example data file.
Is there any resources to clarify this issue. Or can you support simple sample data (with just a few nodes)?
vizulyApril 10, 2016 at 11:25 am #6095Hello,
The complexity you are probably seeing is that this example takes a CSV file and converts it into a hierarchal structure with aggregated sums. You can see the output of this aggregation by using your debugger and setting a breakpoint at this line (around line 115) in the weightedtree_test.js file. Take a look at the value in the nest variable.
node.values = nest;
For a simpler data set you can use JSON format that already has the hierarchal structure inherently. Here is a good example: http://bl.ocks.org/mbostock/4063570
For using other data sets the parameters you would want to adjust are the following:
viz.children (tells the component where the child values are for a given node)
viz.value (tells the component what object property to use for the value of the node size/line weight)
viz.label (tells the component what object property to use for the label of each node.)
I hope that helps!
– Tom
PauJune 30, 2016 at 6:24 am #6284Hi,
Could you be more specific on implementing the example with JSON? I’ve done the following changes using the example JSON you provided but it does not work.
function loadData() { d3.json("data/flare.json", function(json){ data.values=prepData(json); console.log(data.values); initialize(); }) }
function prepData(nest) { var values=[]; //This will be a viz.data function; vizuly.data.aggregateNest(nest, valueFields, function (a, b) { return Number(a) + Number(b); }); //Remove empty child nodes left at end of aggregation and add unqiue ids function removeEmptyNodes(node,parentId,childId) { if (!node) return; node.id=parentId + "_" + childId; if (node.values) { for(var i = node.values.length - 1; i >= 0; i--) { node.id=parentId + "_" + i; if(!node.values[i].key && !node.values[i].Level4) { node.values.splice(i, 1); } else { removeEmptyNodes(node.values[i],node.id,i) } } } } var node={}; node.values = nest; removeEmptyNodes(node,"0","0"); return nest; }
viz.data(data) // Expects hierarchical array of objects. .width(600) // Width of component .height(600) // Height of component .children(function (d) { return d.children }) // Denotes the property that holds child object array .key(function (d) { return d.name }) // Unique key .value(function (d) { return Number(d["agg_" + valueField]) }) // The property of the datum that will be used for the branch and node size .fixedSpan(-1) // fixedSpan > 0 will use this pixel value for horizontal spread versus auto size based on viz width .label(function (d) { // returns label for each node. return trimLabel(d.key || (d['Level' + d.depth]))}) .on("measure",onMeasure) // Make any measurement changes .on("mouseover",onMouseOver) // mouseover callback - all viz components issue these events .on("mouseout",onMouseOut) // mouseout callback - all viz components issue these events .on("click",onClick);
I specially don’t get how to change this last snippet.
Thanks!
PauJuly 1, 2016 at 12:53 am #6293Hi,
I’ve been investigating and the error is caused by a function on your source code called d(). Precisely, I get the following error:
TypeError: a.children(...)(...) is undefined
Apparently, I don’t have defined correctly the function to get the children, but if I run it standalone it works. The function is the following:
.children(function (d) { return d.children })
JSON source data is correctly formatted.
Thanks!
vizulyJuly 1, 2016 at 6:07 am #6297Hi Pau,
Yes, that is very interesting and I have noticed that before with the D3.js Tree. It is very particular about the order in which the tree.children() function gets declared, and it seems redundant to do it twice as you have. But, I am glad you found the fix!
– Tom
PauJuly 3, 2016 at 10:31 am #6309Tom,
I didn’t solve the problem. Removing the double call still doesn’t solve the problem (and I think changing code from a library as a bad practice).
Do you know what am I doing wrong?
Thanks!
DIVYA NADNAJuly 28, 2016 at 2:31 am #6340Hi,
Great work 🙂I absolutely am going to implement the weighted tree that you have so awesomely made. I have implemented d3’s tree graph but my team loved your visualization so much more.
I am faced with first step difficulty- input to this amazing tree. I have a json and I have read it can be given as input, what I am not getting is are there to be any other changes. I hope to have adjusted these:
viz.children (tells the component where the child values are for a given node)
viz.value (tells the component what object property to use for the value of the node size/line weight)
viz.label (tells the component what object property to use for the label of each node.)
.
I am getting console error:
vizuly_core.min.js:2 Uncaught TypeError: Cannot read property ‘values’ of undefined (vizuly_core.min.js)Please help. Soon.
Thanks a ton
vizulyJuly 28, 2016 at 8:26 am #6341Hi,
Most likely this is an issue with how the properties are formatted in your JSON payload. If you are still setting this line:
.children(function (d) { return d.values })
Then vizuly is trying to find datum.values, make sure you have that property, or change this setter to return the correct one.
To help troubleshoot, I would recommend commenting out the xx.min.js references for vizuly and loading the un-minified source files. You can find directions on doing this in our Getting Started article. Once you have done this it will be easier to trace exactly where the error is occurring and I can help you further.
Thanks,
– Tom
joelNovember 9, 2016 at 6:27 pm #6629What does this do?
vizuly.data.aggregateNest( ... )
Is there any documentation for this?
vizulyNovember 10, 2016 at 12:03 pm #6644Hi Joel,
There is a tiny bit of documentation in the source code which I am posting here:
// Takes data produced by a d3.nest() call and aggregates the aggProperties according to the aggregateFunction // This also will take all nth deep child nodes and create the same properties and associated values on the parent nest nodes.
Basically it takes a nested structure and allows for dynamic aggregation (sums, averages, custom aggregation) for defined fields. In the case of the Federal Budget example it is just performing a simple sum (+) operation on the fields in question.
– Tom
-
|
You must be logged in to reply to this topic.