Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>JS Bin</title>
- </head>
- <body>
- <svg width="960" height="500"></svg>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
- <script>
- function ready(fn) {
- if (document.readyState != 'loading'){
- fn();
- } else {
- document.addEventListener('DOMContentLoaded', fn);
- }
- }
- ready(init);
- function init() {
- let parseDate = d3.timeParse("%b-%y");
- function parsing(d) {
- d.date = parseDate(d.date);
- return d;
- }
- data = data.map(parsing);
- let svg = d3.select("svg");
- let margin = {top: 20, right: 20, bottom: 110, left: 40};
- let margin2 = {top: 430, right: 20, bottom: 30, left: 40};
- let width = +svg.attr("width") - margin.left - margin.right;
- let height = +svg.attr("height") - margin.top - margin.bottom;
- let height2 = +svg.attr("height") - margin2.top - margin2.bottom;
- let chart = svg
- .append('g')
- .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
- let overview = svg
- .append('g')
- .attr('transform', 'translate(' + margin2.left + ', ' + margin2.top + ')');
- let x = d3
- .scaleTime()
- .domain(d3.extent(data, d => d.date))
- .range([0, width]);
- let x2 = d3
- .scaleTime()
- .domain(x.domain())
- .range(x.range());
- let y = d3
- .scaleLinear()
- .domain([0, d3.max(data, d => d.price)])
- .range([height, 0]);
- let y2 = d3
- .scaleLinear()
- .domain(y.domain())
- .range([height2, 0]);
- // μΆ κ·Έλ¦¬κΈ°
- let xAxis = d3.axisBottom(x);
- let xAxis2 = d3.axisBottom(x2);
- let yAxis = d3.axisLeft(y);
- chart
- .append('g')
- .attr('class', 'axis--x')
- .attr('transform', 'translate(0, ' + height + ')')
- .call(xAxis);
- chart
- .append('g')
- .call(yAxis);
- overview
- .append('g')
- .attr('transform', 'translate(0, ' + height2 + ')')
- .call(xAxis2);
- let priceArea = d3.area()
- .x(d => x(d.date))
- .y1(d => y(d.price))
- .y0(height)
- .curve(d3.curveMonotoneX);
- svg
- .append('defs')
- .append('clipPath')
- .attr('id', 'clip')
- .append('rect')
- .attr('width', width)
- .attr('height', height);
- chart
- .append('path')
- .attr('class', 'area')
- .datum(data)
- .attr('fill', 'steelblue')
- .attr('d', priceArea)
- .attr('clip-path', 'url(#clip)');
- let priceArea_overview = d3.area()
- .x(d => x2(d.date))
- .y1(d => y2(d.price))
- .y0(height2)
- .curve(d3.curveMonotoneX);
- overview
- .append('path')
- .datum(data)
- .attr('fill', 'steelblue')
- .attr('d', priceArea_overview);
- let brush = d3.brushX()
- .extent([[0, 0], [width, height2]])
- .on('brush', brushed)
- .on('end', brushed);
- overview
- .append('g')
- .call(brush)
- .call(brush.move, x.range());
- function brushed() {
- let s = d3.event.selection || x2.range();
- let new_domain = s.map(x2.invert);
- x.domain(new_domain)
- chart.select('.axis--x').call(xAxis);
- chart.select('.area').attr('d', priceArea);
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement