Я конвертирую d3 treemap v3 в v5, но получаю ошибку - PullRequest
Новая
       82

Я конвертирую d3 treemap v3 в v5, но получаю ошибку

0 голосов
/ 27 сентября 2019

Я преобразую версию 3 древовидной карты d3 в версию 5. Получаю сообщение об ошибке «treemap.nodes не является функцией».Я сделал некоторые изменения, но после определенных шагов я застрял, я делюсь своей ссылкой jsfiddle для того же https://jsfiddle.net/amirhussain930/vygr4Ljo/2/.Может кто-нибудь помочь мне в решении ошибки?Или их древовидная карта v5 доступна?Заранее спасибо. 

<html>
<head>
<meta charset="utf-8">
<title>Zoomable treemap template</title>
<style>
#chart {
background: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.title {
font-weight: bold;
font-size: 24px;
text-align: center;
margin-top: 6px;
margin-bottom: 6px;
}
text {
pointer-events: none;
}
.grandparent text {
font-weight: bold;
}
rect {
fill: none;
stroke: #fff;
}
rect.parent,
.grandparent rect {
stroke-width: 2px;
}
rect.parent {
pointer-events: none;
}
.grandparent rect {
fill: orange;
}
.grandparent:hover rect {
fill: #ee9700;
}
.children rect.parent,
.grandparent rect {
cursor: pointer;
}
.children rect.parent {
fill: #bbb;
fill-opacity: .5;
}
.children:hover rect.child {
fill: #bbb;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var dataset = [
{
"key": "Afghanistan",
"region": "Asia",
"subregion": "Southern Asia",
"value": 25500100
},
{
"key": "Åland Islands",
"region": "Europe",
"subregion": "Northern Europe",
"value": 28502
},
{
"key": "Albania",
"region": "Europe",
"subregion": "Southern Europe",
"value": 2821977
},
{
"key": "Algeria",
"region": "Africa",
"subregion": "Northern Africa",
"value": 37900000
},
{
"key": "American Samoa",
"region": "Oceania",
"subregion": "Polynesia",
"value": 55519
},
{
"key": "Andorra",
"region": "Europe",
"subregion": "Southern Europe",
"value": 76246
},
{
"key": "Angola",
"region": "Africa",
"subregion": "Middle Africa",
"value": 20609294
},
{
"key": "Anguilla",
"region": "Americas",
"subregion": "Caribbean",
"value": 13452
},
{
"key": "Antarctica",
"region": "",
"subregion": "",
"value": -1
},
{
"key": "Belize",
"region": "Americas",
"subregion": "Central America",
"value": 312971
},
{
"key": "Benin",
"region": "Africa",
"subregion": "Western Africa",
"value": 10323000
},
{
"key": "Bermuda",
"region": "Americas",
"subregion": "Northern America",
"value": 64237
},
{
"key": "Bhutan",
"region": "Asia",
"subregion": "Southern Asia",
"value": 740990
},
{
"key": "Bolivia",
"region": "Americas",
"subregion": "South America",
"value": 10027254
},
{
"key": "Bonaire",
"region": "Americas",
"subregion": "Caribbean",
"value": -1
},
{
"key": "Bosnia and Herzegovina",
"region": "Europe",
"subregion": "Southern Europe",
"value": 3791622
},
{
"key": "Botswana",
"region": "Africa",
"subregion": "Southern Africa",
"value": 2024904
},
{
"key": "Bouvet Island",
"region": "",
"subregion": "",
"value": -1
},
{
"key": "Brazil",
"region": "Americas",
"subregion": "South America",
"value": 201032714
},
{
"key": "British Indian Ocean Territory",
"region": "Africa",
"subregion": "Eastern Africa",
"value": -1
},
{
"key": "British Virgin Islands",
"region": "Americas",
"subregion": "Caribbean",
"value": 29537
},
{
"key": "Brunei",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 393162
},
{
"key": "Bulgaria",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 7282041
},
{
"key": "Burkina Faso",
"region": "Africa",
"subregion": "Western Africa",
"value": 17322796
},
{
"key": "Burundi",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 10163000
},
{
"key": "Cambodia",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 15135000
},
{
"key": "Cameroon",
"region": "Africa",
"subregion": "Middle Africa",
"value": 20386799
},
{
"key": "Canada",
"region": "Americas",
"subregion": "Northern America",
"value": 35158304
},
{
"key": "Cape Verde",
"region": "Africa",
"subregion": "Western Africa",
"value": 491875
},
{
"key": "Cayman Islands",
"region": "Americas",
"subregion": "Caribbean",
"value": 55456
},
{
"key": "Central African Republic",
"region": "Africa",
"subregion": "Middle Africa",
"value": 4616000
},
{
"key": "Chad",
"region": "Africa",
"subregion": "Middle Africa",
"value": 12825000
},
{
"key": "Ghana",
"region": "Africa",
"subregion": "Western Africa",
"value": 24658823
},
{
"key": "Gibraltar",
"region": "Europe",
"subregion": "Southern Europe",
"value": 29752
},
{
"key": "Greece",
"region": "Europe",
"subregion": "Southern Europe",
"value": 10815197
},
{
"key": "Greenland",
"region": "Americas",
"subregion": "Northern America",
"value": 56370
},
{
"key": "Grenada",
"region": "Americas",
"subregion": "Caribbean",
"value": 103328
},
{
"key": "Guadeloupe",
"region": "Americas",
"subregion": "Caribbean",
"value": 403355
},
{
"key": "Guam",
"region": "Oceania",
"subregion": "Micronesia",
"value": 159358
},
{
"key": "Guatemala",
"region": "Americas",
"subregion": "Central America",
"value": 15438384
},
{
"key": "Guernsey",
"region": "Europe",
"subregion": "Northern Europe",
"value": 62431
},
{
"key": "Guinea",
"region": "Africa",
"subregion": "Western Africa",
"value": 10824200
},
{
"key": "Guinea-Bissau",
"region": "Africa",
"subregion": "Western Africa",
"value": 1704000
},
{
"key": "Guyana",
"region": "Americas",
"subregion": "South America",
"value": 784894
},
{
"key": "Haiti",
"region": "Americas",
"subregion": "Caribbean",
"value": 10413211
},
{
"key": "Jamaica",
"region": "Americas",
"subregion": "Caribbean",
"value": 2711476
},
{
"key": "Japan",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 127290000
},
{
"key": "Jersey",
"region": "Europe",
"subregion": "Northern Europe",
"value": 97857
},
{
"key": "Jordan",
"region": "Asia",
"subregion": "Western Asia",
"value": 6512600
},
{
"key": "Kazakhstan",
"region": "Asia",
"subregion": "Central Asia",
"value": 17099000
},
{
"key": "Liechtenstein",
"region": "Europe",
"subregion": "Western Europe",
"value": 36842
},
{
"key": "Lithuania",
"region": "Europe",
"subregion": "Northern Europe",
"value": 2950684
},
{
"key": "Luxembourg",
"region": "Europe",
"subregion": "Western Europe",
"value": 537000
},
{
"key": "Macau",
"region": "Asia",
"subregion": "Eastern Asia",
"value": -1
},
{
"key": "Macedonia",
"region": "Europe",
"subregion": "Southern Europe",
"value": -1
},
{
"key": "Madagascar",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 20696070
},
{
"key": "Malawi",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 16363000
},
{
"key": "Malaysia",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 29793600
},
{
"key": "Maldives",
"region": "Asia",
"subregion": "Southern Asia",
"value": 317280
},
{
"key": "Mali",
"region": "Africa",
"subregion": "Western Africa",
"value": 15302000
},
{
"key": "Malta",
"region": "Europe",
"subregion": "Southern Europe",
"value": 416055
},
{
"key": "Marshall Islands",
"region": "Oceania",
"subregion": "Micronesia",
"value": 56086
},
{
"key": "Martinique",
"region": "Americas",
"subregion": "Caribbean",
"value": 394173
},
{
"key": "Mauritania",
"region": "Africa",
"subregion": "Western Africa",
"value": 3461041
},
{
"key": "Mauritius",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 1257900
},
{
"key": "Mayotte",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 212600
},
{
"key": "Mexico",
"region": "Americas",
"subregion": "Central America",
"value": 118395054
},
{
"key": "Micronesia",
"region": "Oceania",
"subregion": "Micronesia",
"value": -1
},
{
"key": "Moldova",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 3559500
},
{
"key": "Monaco",
"region": "Europe",
"subregion": "Western Europe",
"value": 36136
},
{
"key": "Mongolia",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 2754685
},
{
"key": "Montenegro",
"region": "Europe",
"subregion": "Southern Europe",
"value": 620029
},
{
"key": "Montserrat",
"region": "Americas",
"subregion": "Caribbean",
"value": 4922
},
{
"key": "Morocco",
"region": "Africa",
"subregion": "Northern Africa",
"value": 33087700
},
{
"key": "Mozambique",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 23700715
},
{
"key": "Myanmar",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": -1
},
{
"key": "Namibia",
"region": "Africa",
"subregion": "Southern Africa",
"value": 2113077
},
{
"key": "Nauru",
"region": "Oceania",
"subregion": "Micronesia",
"value": 9945
},
{
"key": "Nepal",
"region": "Asia",
"subregion": "Southern Asia",
"value": 26494504
},
{
"key": "Netherlands",
"region": "Europe",
"subregion": "Western Europe",
"value": 16807300
},
{
"key": "New Caledonia",
"region": "Oceania",
"subregion": "Melanesia",
"value": 258958
},
{
"key": "New Zealand",
"region": "Oceania",
"subregion": "Australia and New Zealand",
"value": 4478810
},
{
"key": "Nicaragua",
"region": "Americas",
"subregion": "Central America",
"value": 6071045
},
{
"key": "Niger",
"region": "Africa",
"subregion": "Western Africa",
"value": 17129076
},
{
"key": "Nigeria",
"region": "Africa",
"subregion": "Western Africa",
"value": 173615000
},
{
"key": "Niue",
"region": "Oceania",
"subregion": "Polynesia",
"value": 1613
},
{
"key": "Norfolk Island",
"region": "Oceania",
"subregion": "Australia and New Zealand",
"value": 2302
},
{
"key": "North Korea",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 24895000
},
{
"key": "Northern Mariana Islands",
"region": "Oceania",
"subregion": "Micronesia",
"value": 53883
},
{
"key": "Norway",
"region": "Europe",
"subregion": "Northern Europe",
"value": 5077798
},
{
"key": "Oman",
"region": "Asia",
"subregion": "Western Asia",
"value": 3929000
},
{
"key": "Pakistan",
"region": "Asia",
"subregion": "Southern Asia",
"value": 184845000
},
{
"key": "Palau",
"region": "Oceania",
"subregion": "Micronesia",
"value": 20901
},
{
"key": "Palestine",
"region": "Asia",
"subregion": "Western Asia",
"value": -1
},
{
"key": "Panama",
"region": "Americas",
"subregion": "Central America",
"value": 3405813
},
{
"key": "Papua New Guinea",
"region": "Oceania",
"subregion": "Melanesia",
"value": 7059653
},
{
"key": "Paraguay",
"region": "Americas",
"subregion": "South America",
"value": 6783374
},
{
"key": "Peru",
"region": "Americas",
"subregion": "South America",
"value": 30475144
},
{
"key": "Philippines",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 98678000
},
{
"key": "Pitcairn Islands",
"region": "Oceania",
"subregion": "Polynesia",
"value": 56
},
{
"key": "Poland",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 38533299
},
{
"key": "Portugal",
"region": "Europe",
"subregion": "Southern Europe",
"value": 10562178
},
{
"key": "Puerto Rico",
"region": "Americas",
"subregion": "Caribbean",
"value": 3667084
},
{
"key": "Qatar",
"region": "Asia",
"subregion": "Western Asia",
"value": 2024707
},
{
"key": "Republic of Kosovo",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 1733842
},
{
"key": "Réunion",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 821136
},
{
"key": "Romania",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 20121641
},
{
"key": "Russia",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 143500000
},
{
"key": "Rwanda",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 10537222
},
{
"key": "Saint Barthélemy",
"region": "Americas",
"subregion": "Caribbean",
"value": 8938
},
{
"key": "Saint Helena",
"region": "Africa",
"subregion": "Western Africa",
"value": -1
},
{
"key": "Saint Kitts and Nevis",
"region": "Americas",
"subregion": "Caribbean",
"value": 54000
},
{
"key": "Saint Lucia",
"region": "Americas",
"subregion": "Caribbean",
"value": 166526
},
{
"key": "Saint Martin",
"region": "Americas",
"subregion": "Caribbean",
"value": -1
},
{
"key": "Saint Pierre and Miquelon",
"region": "Americas",
"subregion": "Northern America",
"value": 6081
},
{
"key": "Saint Vincent and the Grenadines",
"region": "Americas",
"subregion": "Caribbean",
"value": 109000
},
{
"key": "Samoa",
"region": "Oceania",
"subregion": "Polynesia",
"value": 187820
},
{
"key": "San Marino",
"region": "Europe",
"subregion": "Southern Europe",
"value": 32509
},
{
"key": "São Tomé and Príncipe",
"region": "Africa",
"subregion": "Middle Africa",
"value": 187356
},
{
"key": "Saudi Arabia",
"region": "Asia",
"subregion": "Western Asia",
"value": 29994272
},
{
"key": "Senegal",
"region": "Africa",
"subregion": "Western Africa",
"value": 13567338
},
{
"key": "Serbia",
"region": "Europe",
"subregion": "Southern Europe",
"value": 7181505
},
{
"key": "Seychelles",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 90945
},
{
"key": "Sierra Leone",
"region": "Africa",
"subregion": "Western Africa",
"value": 6190280
},
{
"key": "Singapore",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 5399200
},
{
"key": "Sint Maarten",
"region": "Americas",
"subregion": "Caribbean",
"value": 37429
},
{
"key": "Slovakia",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 5412008
},
{
"key": "Slovenia",
"region": "Europe",
"subregion": "Southern Europe",
"value": 2061405
},
{
"key": "Solomon Islands",
"region": "Oceania",
"subregion": "Melanesia",
"value": 561000
},
{
"key": "Somalia",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 10496000
},
{
"key": "South Africa",
"region": "Africa",
"subregion": "Southern Africa",
"value": 52981991
},
{
"key": "South Georgia",
"region": "Americas",
"subregion": "South America",
"value": -1
},
{
"key": "South Korea",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 50219669
},
{
"key": "South Sudan",
"region": "Africa",
"subregion": "Middle Africa",
"value": 11296000
},
{
"key": "Spain",
"region": "Europe",
"subregion": "Southern Europe",
"value": 46704314
},
{
"key": "Sri Lanka",
"region": "Asia",
"subregion": "Southern Asia",
"value": 20277597
},
{
"key": "Sudan",
"region": "Africa",
"subregion": "Northern Africa",
"value": 37964000
},
{
"key": "Suriname",
"region": "Americas",
"subregion": "South America",
"value": 534189
},
{
"key": "Svalbard and Jan Mayen",
"region": "Europe",
"subregion": "Northern Europe",
"value": 2655
},
{
"key": "Swaziland",
"region": "Africa",
"subregion": "Southern Africa",
"value": 1250000
},
{
"key": "Sweden",
"region": "Europe",
"subregion": "Northern Europe",
"value": 9625444
},
{
"key": "Switzerland",
"region": "Europe",
"subregion": "Western Europe",
"value": 8085300
},
{
"key": "Syria",
"region": "Asia",
"subregion": "Western Asia",
"value": 21898000
},
{
"key": "Taiwan",
"region": "Asia",
"subregion": "Eastern Asia",
"value": 23361147
},
{
"key": "Tajikistan",
"region": "Asia",
"subregion": "Central Asia",
"value": 8000000
},
{
"key": "Tanzania",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 44928923
},
{
"key": "Thailand",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 65926261
},
{
"key": "Timor-Leste",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": -1
},
{
"key": "Togo",
"region": "Africa",
"subregion": "Western Africa",
"value": 6191155
},
{
"key": "Tokelau",
"region": "Oceania",
"subregion": "Polynesia",
"value": 1411
},
{
"key": "Tonga",
"region": "Oceania",
"subregion": "Polynesia",
"value": 103036
},
{
"key": "Trinidad and Tobago",
"region": "Americas",
"subregion": "Caribbean",
"value": 1328019
},
{
"key": "Tunisia",
"region": "Africa",
"subregion": "Northern Africa",
"value": 10833431
},
{
"key": "Turkey",
"region": "Asia",
"subregion": "Western Asia",
"value": 75627384
},
{
"key": "Turkmenistan",
"region": "Asia",
"subregion": "Central Asia",
"value": 5240000
},
{
"key": "Turks and Caicos Islands",
"region": "Americas",
"subregion": "Caribbean",
"value": 31458
},
{
"key": "Tuvalu",
"region": "Oceania",
"subregion": "Polynesia",
"value": 11323
},
{
"key": "Uganda",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 35357000
},
{
"key": "Ukraine",
"region": "Europe",
"subregion": "Eastern Europe",
"value": 45461627
},
{
"key": "United Arab Emirates",
"region": "Asia",
"subregion": "Western Asia",
"value": 8264070
},
{
"key": "United Kingdom",
"region": "Europe",
"subregion": "Northern Europe",
"value": 63705000
},
{
"key": "United States",
"region": "Americas",
"subregion": "Northern America",
"value": 317101000
},
{
"key": "United States Minor Outlying Islands",
"region": "Americas",
"subregion": "Northern America",
"value": -1
},
{
"key": "United States Virgin Islands",
"region": "Americas",
"subregion": "Caribbean",
"value": 106405
},
{
"key": "Uruguay",
"region": "Americas",
"subregion": "South America",
"value": 3286314
},
{
"key": "Uzbekistan",
"region": "Asia",
"subregion": "Central Asia",
"value": 30183400
},
{
"key": "Vanuatu",
"region": "Oceania",
"subregion": "Melanesia",
"value": 264652
},
{
"key": "Venezuela",
"region": "Americas",
"subregion": "South America",
"value": 28946101
},
{
"key": "Vietnam",
"region": "Asia",
"subregion": "South-Eastern Asia",
"value": 90388000
},
{
"key": "Wallis and Futuna",
"region": "Oceania",
"subregion": "Polynesia",
"value": 13135
},
{
"key": "Western Sahara",
"region": "Africa",
"subregion": "Northern Africa",
"value": 567000
},
{
"key": "Yemen",
"region": "Asia",
"subregion": "Western Asia",
"value": 24527000
},
{
"key": "Zambia",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 13092666
},
{
"key": "Zimbabwe",
"region": "Africa",
"subregion": "Eastern Africa",
"value": 12973808
}
]
window.addEventListener('message', function(e) {
var opts = e.data.opts,
data = e.data.data;
return main(opts, data);
});
var defaults = {
margin: {top: 24, right: 0, bottom: 0, left: 0},
rootname: "TOP",
format: ",d",
title: "",
width: 960,
height: 500
};
function main(o, data) {
var root,
opts = $.extend(true, {}, defaults, o),
formatNumber = d3.format(opts.format),
rname = opts.rootname,
margin = opts.margin,
theight = 36 + 16;
$('#chart').width(opts.width).height(opts.height);
var width = opts.width - margin.left - margin.right,
height = opts.height - margin.top - margin.bottom - theight,
transitioning;
var color = d3.scaleOrdinal(d3.schemeCategory10);
var x = d3.scaleLinear()
.domain([0, width])
.range([0, width]);
var y = d3.scaleLinear()
.domain([0, height])
.range([0, height]);
var treemap = d3.treemap()
.size([width, height])
.paddingInner(0)
.round(false);
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.bottom + margin.top)
.style("margin-left", -margin.left + "px")
.style("margin.right", -margin.right + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.style("shape-rendering", "crispEdges");
var grandparent = svg.append("g")
.attr("class", "grandparent");
grandparent.append("rect")
.attr("y", -margin.top)
.attr("width", width)
.attr("height", margin.top);
grandparent.append("text")
.attr("x", 6)
.attr("y", 6 - margin.top)
.attr("dy", ".75em");
if (opts.title) {
$("#chart").prepend("<p class='title'>" + opts.title + "</p>");
}
if (data instanceof Array) {
root = { key: rname, values: data };
} else {
root = data;
}
initialize(root);
accumulate(root);
layout(root);
console.log(root);
display(root);
if (window.parent !== window) {
var myheight = document.documentElement.scrollHeight || document.body.scrollHeight;
window.parent.postMessage({height: myheight}, '*');
}
function initialize(root) {
root.x = root.y = 0;
root.dx = width;
root.dy = height;
root.depth = 0;
}
function accumulate(d) {
return (d._children = d.values)
? d.value = d.values.reduce(function(p, v) { return p + accumulate(v); }, 0)
: d.value;
}
function layout(d) {
if (d._children) {
treemap.nodes({_children: d._children});
d._children.forEach(function(c) {
c.x = d.x + c.x * d.dx;
c.y = d.y + c.y * d.dy;
c.dx *= d.dx;
c.dy *= d.dy;
c.parent = d;
layout(c);
});
}
}
function display(d) {
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.key + " (" + formatNumber(d.value) + ")"; });
children.append("text")
.attr("class", "ctext")
.text(function(d) { return d.key; })
.call(text2);
g.append("rect")
.attr("class", "parent")
.call(rect);
var t = g.append("text")
.attr("class", "ptext")
.attr("dy", ".75em")
t.append("tspan")
.text(function(d) { return d.key; });
t.append("tspan")
.attr("dy", "1.0em")
.text(function(d) { return formatNumber(d.value); });
t.call(text);
g.selectAll("rect")
.style("fill", function(d) { return color(d.key); });
function transition(d) {
if (transitioning || !d) return;
transitioning = true;
var g2 = display(d),
t1 = g1.transition().duration(750),
t2 = g2.transition().duration(750);
x.domain([d.x, d.x + d.dx]);
y.domain([d.y, d.y + d.dy]);
svg.style("shape-rendering", null);
svg.selectAll(".depth").sort(function(a, b) { return a.depth - b.depth; });
g2.selectAll("text").style("fill-opacity", 0);
t1.selectAll(".ptext").call(text).style("fill-opacity", 0);
t1.selectAll(".ctext").call(text2).style("fill-opacity", 0);
t2.selectAll(".ptext").call(text).style("fill-opacity", 1);
t2.selectAll(".ctext").call(text2).style("fill-opacity", 1);
t1.selectAll("rect").call(rect);
t2.selectAll("rect").call(rect);
t1.remove().each("end", function() {
svg.style("shape-rendering", "crispEdges");
transitioning = false;
});
}
return g;
}
function text(text) {
text.selectAll("tspan")
.attr("x", function(d) { return x(d.x) + 6; })
text.attr("x", function(d) { return x(d.x) + 6; })
.attr("y", function(d) { return y(d.y) + 6; })
.style("opacity", function(d) { return this.getComputedTextLength() < x(d.x + d.dx) - x(d.x) ? 1 : 
0; });
}
function text2(text) {
text.attr("x", function(d) { return x(d.x + d.dx) - this.getComputedTextLength() - 6; })
.attr("y", function(d) { return y(d.y + d.dy) - 6; })
.style("opacity", function(d) { return this.getComputedTextLength() < x(d.x + d.dx) - x(d.x) ? 1 : 
0; });
}
function rect(rect) {
rect.attr("x", function(d) { return x(d.x); })
.attr("y", function(d) { return y(d.y); })
.attr("width", function(d) { return x(d.x + d.dx) - x(d.x); })
.attr("height", function(d) { return y(d.y + d.dy) - y(d.y); });
}
function name(d) {
return d.parent
? name(d.parent) + " / " + d.key + " (" + formatNumber(d.value) + ")"
: d.key + " (" + formatNumber(d.value) + ")";
}
}
if (window.location.hash === "") {
var data = d3.nest().key(function(d) { return d.region; }).key(function(d) { return d.subregion; 
}).entries(dataset);
main({title: "World Population"}, {key: "World", values: data});
}
</script>
</body>
</html>
...