How can I capture the click event for the last node?
I followed this tutorial(http://bl.ocks.org/ganeshv/6a8e9ada3ab7f2d88022) to make the tree map. In my purpose I want to make the last node clickable, then get the node data send it to server.
I used the developer tool to get the structure of tree map.
My code in the js file is that:
function display(d) {
lastGroupArray = [];
// collectLastGroup(d);
console.log(lastGroupArray);
grandparent
.datum(d.parent)
.on("click", transition)
.select("text")
.text(name(d));
var g1 = svg.insert("g", ".grandparent")
.datum(d)
.attr("class", "depth");
var g = g1.selectAll("g")
.data(d._children)
.enter().append("g");
g.filter(function (d) { return d._children; })
.classed("children", true)
.on("click", transition);
var children = g.selectAll(".child")
.data(function(d) { return d._children || [d]; })
.enter().append("g");
children.append("rect")
.attr("class", "child")
.call(rect)
.append("title")
.text(function(d) { return d.name + " (" + formatNumber(d.value) + ")"; });
//append child text
children.append("text")
.attr("class", "ctext")
.text(function(d) { return d.name; })
.call(text2);
//append parent text
g.append("rect")
.attr("class", "parent")
.call(rect);
var ccc = g.selectAll("rect").on("click", function (d){
if(typeof d.lastGroup !== 'undefined'){
d.lastGroup.forEach( function (dd) {
// lastGroupArray.push(new LastGroup(dd));
console.log(dd.filePath);
});
}
})
My function above only can capture the last node when it has a parent.
The function will not work if the node is the last child when the treemap is loaded.
The Payee is the last node when the treemap is loaded.
Here is my JSON data: The payee is on the bottom, it only has one parent which is the root "digit-first2".
{
"children": [
{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result1.csv",
"name": "0~2",
"value": 112
}],
"children": [
{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result3.csv",
"name": "0~2",
"value": 218
}],
"children": [{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result7.csv",
"name": "0~2",
"value": 836
}],
"name": "Payee",
"value": 836
}],
"name": "Tran Type",
"value": 218
},
{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result5.csv",
"name": "0~2",
"value": 834
}],
"name": "Payee",
"value": 834
}
],
"name": "[Code-Finger-Print, [Memo]]",
"value": 112
},
{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result2.csv",
"name": "0~2",
"value": 138
}],
"children": [{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result6.csv",
"name": "0~2",
"value": 766
}],
"name": "Payee",
"value": 766
}],
"name": "Tran Type",
"value": 138
},
{
"lastGroup": [{
"filePath": "Jarfile/output/result/ResultFolder/digit-first2-2017-10-22T16-05-53/result4.csv",
"name": "0~2",
"value": 731
}],
"name": "Payee",
"value": 731
}
],
"name": "digit-first2"
}
My function above will only work when the root is not the parent of the last node. My question is how can I capture the click event for the node if the root is this node`s parent.