46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
|
//Create a SVG
|
||
|
|
var selection = "div#svg",
|
||
|
|
svgWidth = $(selection).width(),
|
||
|
|
svgHeight = $(selection).height(),
|
||
|
|
svg = d3.select("div#svg").append("svg")
|
||
|
|
.attr("width", svgWidth)
|
||
|
|
.attr("height", svgHeight);
|
||
|
|
|
||
|
|
//Create a responsive SVG
|
||
|
|
var svg = d3.select(html_tag_attr).append("svg")
|
||
|
|
.attr("viewBox", "0 0 "+ svgWidth +" "+ svgHeight)
|
||
|
|
.attr("perserveAspectRatio", "xMinYMid");
|
||
|
|
|
||
|
|
//Create a line chart
|
||
|
|
var line = d3.line()
|
||
|
|
.x(function(d){ return d.date; })
|
||
|
|
.y(function(d){ return d.value; })
|
||
|
|
.curve(d3.curveBasis);
|
||
|
|
|
||
|
|
svg.append("path")
|
||
|
|
.attr("d", line(dataLineChart))
|
||
|
|
.attr("fill", "none")
|
||
|
|
.attr("stroke", "red");
|
||
|
|
|
||
|
|
//Create an horizontal axis
|
||
|
|
var xScale = d3.scaleLinear()
|
||
|
|
.domain([minDomain, maxDomain])
|
||
|
|
.range([minRange, maxRange]);
|
||
|
|
|
||
|
|
var xAxis = d3.axisBottom(xScale);
|
||
|
|
svg.append("g").call(xAxis);
|
||
|
|
//NOTE axisBottom does not mean that axis will be placed at the bottom of the graphic but that ticks of the acis will be placed below the line of the axis
|
||
|
|
//... to place the axis to the bottom of the graphic, you need to replace the line above by the line below
|
||
|
|
svg.append("g")
|
||
|
|
.attr("transform", function(){ return "translate(" + 0 + ", " + height-padding +")"; })
|
||
|
|
.call(xAxis);
|
||
|
|
|
||
|
|
//yAxis with values from bottom to top of the axis
|
||
|
|
var yScale = d3.scaleLinear().range([height, 0]);
|
||
|
|
yScale.domain([0, d3.max(dataLineChart, function(d){ return d.y; })]);
|
||
|
|
|
||
|
|
svg.append("g")
|
||
|
|
.attr("transform", "translate(" + margin.left + ", " + (0 - margin.bottom) + ")")
|
||
|
|
.call(d3.axisLeft(yScale));
|
||
|
|
|