CODEWITHSUNDEEP
jsond3.jstreemap
Rameez
Rameez

Reputation: 601

Issue with D3 zoomable treemap

I am using D3 Zoomable Treemap to show some data. But I want to use it to show like "One word first and when clicking on it a sentence with that word". I tried all the ways to implement that, but didnt got what i expect..

Here I tried my code in JSfiddle and the following is my JSON input data I provided to the treemap

JSON

{
     "name": "Hottopics",
    "children": [
    {
    "name": "OPEN",
     "children": [
        {"name": "federal OPEN market committee", "size": 3938}
        ]
     },
     {
     "name": "MORTGAGE",
     "children": [

        {"name": "fixed MORTGAGE rates hit", "size": 3812}
     ]
     },
     {
     "name": "DAY",
     "children": [

        {"name": "thurs DAY everyone who", "size": 6714}
     ]
     },
     {
     "name": "BATHS",
     "children": [

        {"name": "BATHS napx sf", "size": 743}
     ]
     },
     {
     "name": "MARKET",
     "children": [

        {"name": "housing MARKET is slated", "size": 3534}
     ]
     },
     {
     "name": "WEEK",
     "children": [

        {"name": "WEEK realestate mortgages", "size": 5731}
     ]
     },
     {
     "name": "HOUSING",
     "children": [

        {"name": "mortgages HOUSING marketnthe freddie", "size": 7840}
     ]
     },
     {
     "name": "SUMMER",
     "children": [

        {"name": "best SUMMER day camps", "size": 5914}
     ]
     },
     {
     "name": "IDEAS",
     "children": [

        {"name": "creative IDEAS amp unusual", "size": 3416}
     ]
     },
     {
     "name": "CHECK",
     "children": [

        {"name": "solstice CHECK it outsummersolstice", "size": 7074}
     ]
     }
     ]
}

In the above JSON I want to show "OPEN" first and when clicking on "OPEN" i want to show "federal OPEN market committee". Like this I want to show the entire content.

Upvotes: 0

Views: 236

Answers (1)

prashant
prashant

Reputation: 1815

This can be achieved as follows:

In the initial text function use:

.text(function (d) {
     return d.parent['name'];
 })

In the zoom method:

//In the beginning of zoom method:
var nodeCurr = d;

// Other code

//In text selection block of zoom method
t.select("text")
.attr("x", function (d) {
    return kx * d.dx / 2;
})
.attr("y", function (d) {
    return ky * d.dy / 2;
})
.text(function (d) {
    var text = nodeCurr.depth > 0 ? d.name : d.parent['name'];
    return text;
})
.style("opacity", function (d) {
    return kx * d.dx > d.w ? 1 : 0;
});

I have updated your fiddle here: http://jsfiddle.net/prashant_11235/fxz56/1/

You can access the working code.

Upvotes: 1

Related Questions