|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
.axis path { |
|
display: none; |
|
} |
|
|
|
.axis line { |
|
stroke-opacity: 0.3; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.view { |
|
fill: url(#gradient); |
|
stroke: #000; |
|
} |
|
|
|
button { |
|
position: absolute; |
|
top: 20px; |
|
left: 20px; |
|
} |
|
|
|
</style> |
|
<button>Reset</button> |
|
<svg width="960" height="500"> |
|
<defs> |
|
<d3fc-group id="chart" auto-resize style="display: flex; height: 500px; width: 100%; overflow: hidden"> |
|
<div style="flex: 1; display: flex; flex-direction: column; padding-right: 1em"> |
|
<div style="flex: 1; display: flex; flex-direction: row"> |
|
<div style="width: 1em;"> |
|
<div class='vertical-text'>Price</div> |
|
</div> |
|
<d3fc-svg id='y-axis' style='width: 1em;'></d3fc-svg> |
|
<d3fc-svg id="plot-area" style="flex: 1; overflow: hidden"></d3fc-svg> |
|
</div> |
|
<d3fc-svg id="x-axis" style="height: 2em; margin-left: 2em"></d3fc-svg> |
|
</div> |
|
</d3fc-group> |
|
</defs> |
|
</svg> |
|
<script src="//d3js.org/d3.v4.min.js"></script> |
|
<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script> |
|
<script src="https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script> |
|
|
|
<!-- use babel so that we can use arrow functions and other goodness in this block! --> |
|
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> |
|
|
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<script src="https://unpkg.com/d3fc@13.0.1"></script> |
|
|
|
<div id='chart-element' style='height: 500px'></div> |
|
|
|
<script src='chart.js' type='text/babel'></script> |
|
<script> |
|
|
|
var svg = d3.select("svg"), |
|
width = +svg.attr("width"), |
|
height = +svg.attr("height"); |
|
|
|
var zoom = d3.zoom() |
|
.scaleExtent([1, 40]) |
|
.translateExtent([[-100, -100], [width + 90, height + 100]]) |
|
.on("zoom", zoomed); |
|
|
|
const xScale = fc.scaleDiscontinuous(d3.scaleTime()) |
|
.discontinuityProvider(fc.discontinuitySkipWeekends()).domain([-1, width + 1]) |
|
.range([-1, width + 1]); |
|
|
|
const yScale = d3.scaleLinear() |
|
.domain([-1, height + 1]) |
|
.range([-1, height + 1]); |
|
var xAxis = d3.axisBottom(x) |
|
.ticks((width + 2) / (height + 2) * 10) |
|
.tickSize(height) |
|
.tickPadding(8 - height); |
|
|
|
var yAxis = d3.axisRight(y) |
|
.ticks(10) |
|
.tickSize(width) |
|
.tickPadding(8 - width); |
|
const dateAxis = d3.axisBottom() |
|
.scale(xScale); |
|
const priceAxis = d3.axisLeft() |
|
.scale(yScale); |
|
const candlestickSeries = fc.seriesSvgCandlestick() |
|
.bandwidth(2) |
|
.xScale(xScale) |
|
.yScale(yScale); |
|
|
|
|
|
// use the extent component to determine the x and y domain |
|
const xExtent = fc.extentDate() |
|
.accessors([d => d.date]); |
|
|
|
const yExtent = fc.extentLinear() |
|
.accessors([d => d.high, d => d.low]); |
|
const parseDate = d3.timeParse("%d-%b-%y"); |
|
|
|
d3.select('#plot-area') |
|
// handle the plot area measure event in order to determine the axis range |
|
.on('measure', () => { |
|
xScale.range([0, event.detail.width]); |
|
yScale.range([event.detail.height, 0]); |
|
}) |
|
// handle the draw event, rendering the series |
|
.on('draw', (d, i, nodes) => { |
|
d3.select(nodes[i]) |
|
.select('svg') |
|
.call(candlestickSeries); |
|
}); |
|
var view = svg.append("rect") |
|
.attr("class", "view") |
|
.attr("x", 0.5) |
|
.attr("y", 0.5) |
|
.attr("width", width - 1) |
|
.attr("height", height - 1); |
|
|
|
var gX = svg.append("g") |
|
.attr("class", "axis axis--x") |
|
.call(xAxis); |
|
|
|
var gY = svg.append("g") |
|
.attr("class", "axis axis--y") |
|
.call(yAxis); |
|
|
|
d3.select("button") |
|
.on("click", resetted); |
|
|
|
svg.call(zoom); |
|
|
|
function zoomed() { |
|
view.attr("transform", d3.event.transform); |
|
gX.call(xAxis.scale(d3.event.transform.rescaleX(x))); |
|
gY.call(yAxis.scale(d3.event.transform.rescaleY(y))); |
|
} |
|
|
|
function resetted() { |
|
svg.transition() |
|
.duration(750) |
|
.call(zoom.transform, d3.zoomIdentity); |
|
} |
|
|
|
</script> |