Built with blockbuilder.org
forked from areologist's block: axes and margins
license: mit |
Built with blockbuilder.org
forked from areologist's block: axes and margins
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
.chart { | |
border: 1px solid hotpink; | |
} | |
svg { | |
background-color: #f3f9fc; | |
border: 1px solid blue; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="chart"></div> | |
<script> | |
const margin = { top: 25, right: 35, bottom: 60, left: 35 }; | |
const width = 550 - margin.left - margin.right; | |
const height = 325 - margin.top - margin.bottom; | |
const fullWidth = width + margin.left + margin.right; | |
const fullHeight = height + margin.top + margin.bottom; | |
const svg = d3.select('.chart') | |
.append('svg') | |
.attr('width', width + margin.left + margin.right) | |
.attr('height', height + margin.top + margin.bottom) | |
.call(responsivefy) | |
.append('g') | |
.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); | |
svg.append('rect') | |
.attr('width', width) | |
.attr('height', height) | |
.attr('fill', 'lightblue') | |
.attr('stroke', 'green'); | |
const yScale = d3.scaleLinear() | |
.domain([0, 100]) | |
.range([height, 0]); | |
const yAxis = d3.axisLeft(yScale) | |
.ticks(10); | |
//.tickValues([0, 100]); | |
// add the axis by passing it into d3.call (and wrap it in a <g>) | |
svg.append('g') | |
.call(yAxis); | |
// let's make a date-based x axis | |
const xScale = d3.scaleTime() | |
.domain([new Date(2017, 0, 1), new Date(2017, 1, 1)]) | |
.range([0, width]); | |
const xAxis = d3.axisBottom(xScale) | |
.ticks(5) | |
.tickSize(20) | |
.tickPadding(10); | |
svg.append('g') | |
.attr('transform', `translate(0, ${height})`) | |
.style('font-style', 'italic') | |
.call(xAxis); | |
function responsivefy(svg) { | |
// get container + svg aspect ratio | |
var container = d3.select(svg.node().parentNode), | |
width = parseInt(svg.style("width")), | |
height = parseInt(svg.style("height")), | |
aspect = width / height; | |
// add viewBox and preserveAspectRatio properties, | |
// and call resize so that svg resizes on inital page load | |
svg.attr("viewBox", "0 0 " + width + " " + height) | |
.attr("preserveAspectRatio", "xMinYMid") | |
.call(resize); | |
// to register multiple listeners for same event type, | |
// you need to add namespace, i.e., 'click.foo' | |
// necessary if you call invoke this function for multiple svgs | |
// api docs: https://github.com/mbostock/d3/wiki/Selections#on | |
d3.select(window).on("resize." + container.attr("id"), resize); | |
// get width of container and resize svg to fit it | |
function resize() { | |
var targetWidth = parseInt(container.style("width")); | |
svg.attr("width", targetWidth); | |
svg.attr("height", Math.round(targetWidth / aspect)); | |
} | |
} | |
</script> | |
</body> |