%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/d3/other/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/d3/other/treemap.js |
/*========================================================================================= File Name: treemap.js Description: D3 treemap chart ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ // Treemap chart // ------------------------------ $(window).on("load", function(){ var ele = d3.select("#treemap"), margin = {top: 20, right: 20, bottom: 30, left: 50}, width = ele.node().getBoundingClientRect().width - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // Initialize Colors // ------------------------------ // var color = d3.scale.category20c(); var color = d3.scale.ordinal() .range(["#99B898", "#FECEA8", "#FF847C", "#E84A5F", "#F8B195", "#F67280", "#C06C84"]); // Chart var treemap = d3.layout.treemap() .size([width, height]) .sticky(true) .value(function(d) { return d.size; }); var container = ele.append("div"); var div = container .style("position", "relative") .style("width", (width + margin.left + margin.right) + "px") .style("height", (height + margin.top + margin.bottom) + "px") .style("left", margin.left + "px") .style("top", margin.top + "px"); // Load data // ------------------------------ d3.json("../../../app-assets/data/d3/other/treemap.json", function(error, root) { if (error) throw error; var node = div.datum(root).selectAll(".node") .data(treemap.nodes) .enter().append("div") .attr("class", "node") .call(position) .style("background", function(d) { return d.children ? color(d.name) : null; }) .style("border", "solid 1px white") .style("font-size", "10px") .style("line-height", "12px") .style("overflow", "hidden") .style("position", "absolute") .style("text-indent", "2px") .style("color", "#000") .text(function(d) { return d.children ? null : d.name; }); d3.selectAll("input").on("change", function change() { var value = this.value === "count" ? function() { return 1; } : function(d) { return d.size; }; node .data(treemap.value(value).nodes) .transition() .duration(1500) .call(position); }); }); function position() { this.style("left", function(d) { return d.x + "px"; }) .style("top", function(d) { return d.y + "px"; }) .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; }) .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; }); } });