%PDF- %PDF-
Direktori : /home/opti/workflow/src/public/app-assets/js/scripts/charts/d3/line/ |
Current File : /home/opti/workflow/src/public/app-assets/js/scripts/charts/d3/line/multi-series-line.min.js |
/*! * stack-admin-theme (https://pixinvent.com/bootstrap-admin-template/stack) * Copyright 2018 PIXINVENT * Licensed under the Themeforest Standard Licenses */ $(window).on("load",function(){function resize(){width=ele.node().getBoundingClientRect().width-margin.left-margin.right,container.attr("width",width+margin.left+margin.right),svg.attr("width",width+margin.left+margin.right),x.range([0,width]),svg.selectAll(".d3-xaxis").call(xAxis),city.selectAll(".d3-line").attr("d",function(d){return line(d.values)})}var city,ele=d3.select("#multi-series-line"),margin={top:20,right:20,bottom:30,left:50},width=ele.node().getBoundingClientRect().width-margin.left-margin.right,height=500-margin.top-margin.bottom,parseDate=d3.time.format("%Y%m%d").parse,x=d3.time.scale().range([0,width]),y=d3.scale.linear().range([height,0]),color=d3.scale.ordinal().range(["#673AB7","#00BCD4","#FF5722"]),xAxis=d3.svg.axis().scale(x).orient("bottom"),yAxis=d3.svg.axis().scale(y).orient("left"),line=d3.svg.line().interpolate("basis").x(function(d){return x(d.date)}).y(function(d){return y(d.temperature)}),container=ele.append("svg"),svg=container.attr("width",width+margin.left+margin.right).attr("height",height+margin.top+margin.bottom).append("g").attr("transform","translate("+margin.left+","+margin.top+")");d3.tsv("../../../app-assets/data/d3/line/multi-series-line.tsv",function(error,data){if(error)throw error;color.domain(d3.keys(data[0]).filter(function(key){return"date"!==key})),data.forEach(function(d){d.date=parseDate(d.date)});var cities=color.domain().map(function(name){return{name:name,values:data.map(function(d){return{date:d.date,temperature:+d[name]}})}});x.domain(d3.extent(data,function(d){return d.date})),y.domain([d3.min(cities,function(c){return d3.min(c.values,function(v){return v.temperature})}),d3.max(cities,function(c){return d3.max(c.values,function(v){return v.temperature})})]),svg.append("g").attr("class","d3-axis d3-xaxis").attr("transform","translate(0,"+height+")").call(xAxis),svg.append("g").attr("class","d3-axis d3-yaxis").call(yAxis).append("text").attr("transform","rotate(-90)").attr("y",6).attr("dy",".71em").style("text-anchor","end").style("fill","#666").style("font-size",12).text("Temperature (ºF)"),city=svg.selectAll(".city").data(cities).enter().append("g").attr("class","city"),city.append("path").attr("class","d3-line").attr("d",function(d){return line(d.values)}).style("fill","none").style("stroke-width",2).style("stroke",function(d){return color(d.name)}),city.append("text").datum(function(d){return{name:d.name,value:d.values[d.values.length-1]}}).attr("transform",function(d){return"translate("+x(d.value.date)+","+y(d.value.temperature)+")"}).attr("x",3).attr("dy",".35em").text(function(d){return d.name})}),$(window).on("resize",resize),$(".menu-toggle").on("click",resize)});