Old school D3 from simpler times

All examples By author By category About

jensgrubert

Full window Github gist

Treemap with labels

Treemap with internal labels.

<html>
<head>
    <title>Treemap with Wrapping and Truncated Labels</title>
    <meta charset="utf-8">
    
    
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="d3.v3.min.js"></script>
 
    <style type="text/css">
        html, body {
            overflow: hidden;
            margin: 0;
            font-family: "Helvetica Neue", Helvetica;
        }
        rect {
            fill: none;
            stroke: #FFFFFF;
        }
        .labelbody {
            margin: 2px;
        }
        .foreignObject {
            font: 9px sans-serif;
            text-overflow: ellipsis;
            text-align: left;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
<div id="chart"></div>
 
 <p>
<button onclick="switchData('data-to-what.json')">Show: "Adaptive to What?"</button>
<button onclick="switchData('data-what.json')">Show: "Adapting What?"</button>
</p>

<script type="text/javascript">
    var w = 700;
    var h = 700;
    var paddingAllowance = 2;
    var color = d3.scale.category20c();
 
    var treemap = d3.layout.treemap()
        .size([w, h])
        .padding([20, 4, 4, 4])
        .value(function(d) {
            return d.size;
        });
 
    var svg = d3.select("#chart").append("svg")
        .style("position", "relative")
        .style("width", w + "px")
        .style("height", h + "px")
        .append("g")
        .attr("transform", "translate(-.5,-.5)");
 
 function switchData(dataFn) {
	d3.select("svg").remove();
	
	treemap = d3.layout.treemap()
        .size([w, h])
        .padding([20, 4, 4, 4])
        .value(function(d) {
            return d.size;
        });
		
	svg = d3.select("#chart").append("svg")
        .style("position", "relative")
        .style("width", w + "px")
        .style("height", h + "px")
        .append("g")
        .attr("transform", "translate(-.5,-.5)");
		
	drawTreemap(dataFn);
}
function drawTreemap(datFn01) {
    d3.json(datFn01, function(json) {
        var cell = svg.data([json]).selectAll("g")
            .data(treemap)
            .enter().append("g")
            .attr("class", "cell")
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
 
        cell.append("rect")
            .attr("width", function(d) {
                return d.dx;
            })
            .attr("height", function(d) {
                return d.dy;
            })
            .style("fill", function(d) {
                return d.children ? color(d.name) : null;
            });
 
        if (window['isIE']) { // IE sucks so you have to manually truncate the labels here
            cell.append("text")
                .attr("class", "foreignObject")
                .attr("transform", "translate(3, 13)")
                .text(function(d) {
                    return (d.dy < 16 ? "" : d.name);
                })
                .filter(function(d) {
                    d.tw = this.getComputedTextLength();
                    return d.dx < d.tw;
                })
                .each(function(d) { // ridiculous routine where we test to see if label is short enough to fit
                    var proposedLabel = d.name;
                    var proposedLabelArray = proposedLabel.split('');
                    while (d.tw > d.dx && proposedLabelArray.length) {
                        // pull out 3 chars at a time to speed things up (one at a time is too slow)
                        proposedLabelArray.pop(); proposedLabelArray.pop(); proposedLabelArray.pop();
                        if (proposedLabelArray.length===0) {
                            proposedLabel = "";
                        } else {
                            proposedLabel = proposedLabelArray.join('') + "..."; // manually truncate with ellipsis
                        }
                        d3.select(this).text(proposedLabel);
                        d.tw = this.getComputedTextLength();
                    }
                });
        } else {
            // normal browsers use these labels; using foreignObject inside SVG allows use of wrapping text inside
            // divs rather than less-flexible svg-text labels
            cell.append("foreignObject")
                .attr("class", "foreignObject")
                .attr("width", function(d) {
                    return d.dx - paddingAllowance;
                })
                .attr("height", function(d) {
                    return d.dy - paddingAllowance;
                })
                .append("xhtml:body")
                .attr("class", "labelbody")
                .append("div")
                .attr("class", "label")
                .text(function(d) {
                    return d.name;
                })
                .attr("text-anchor", "middle")
        }
    });
}
 
</script>

<script type="text/javascript">
drawTreemap('data-to-what.json');
</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js