%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/d3/circle/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/d3/circle/zoomable-sunburst.js |
/*========================================================================================= File Name: line.js Description: D3 simple line chart ---------------------------------------------------------------------------------------- Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template Version: 1.0 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ // Line chart // ------------------------------ $(window).on("load", function(){ var ele = d3.select("#zoomable-sunburst"), width = ele.node().getBoundingClientRect().width, height = 400; radius = (Math.min(width, height) / 2) - 10; var formatNumber = d3.format(",d"); var x = d3.scale.linear() .range([0, 2 * Math.PI]); var y = d3.scale.sqrt() .range([0, radius]); // Color var color = d3.scale.ordinal() .range(["#99B898", "#FECEA8", "#FF847C", "#E84A5F", "#C06C84", "#6C5B7B", "#355C7D"]); var partition = d3.layout.partition() .value(function(d) { return d.size; }); var arc = d3.svg.arc() .startAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); }) .endAngle(function(d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); }) .innerRadius(function(d) { return Math.max(0, y(d.y)); }) .outerRadius(function(d) { return Math.max(0, y(d.y + d.dy)); }); var svg = ele.append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + (height / 2) + ")"); d3.json("../../../app-assets/data/d3/circle/flare.json", function(error, root) { if (error) throw error; svg.selectAll("path") .data(partition.nodes(root)) .enter().append("path") .attr("d", arc) .style("fill", function(d) { return color((d.children ? d : d.parent).name); }) .on("click", click) .append("title") .text(function(d) { return d.name + "\n" + formatNumber(d.value); }); }); function click(d) { svg.transition() .duration(750) .tween("scale", function() { var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]), yd = d3.interpolate(y.domain(), [d.y, 1]), yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]); return function(t) { x.domain(xd(t)); y.domain(yd(t)).range(yr(t)); }; }) .selectAll("path") .attrTween("d", function(d) { return function() { return arc(d); }; }); } d3.select(self.frameElement).style("height", height + "px"); });