<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width,initial-scale=1"> | |
<title>HiGlass</title> | |
<style type="text/css"> | |
.canvasjs-chart-credit { | |
display:none; | |
.wp-caption: { | |
}; | |
} | |
</style> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | |
<link rel="stylesheet" href="styles/page.css"> | |
<link rel="stylesheet" href="hglib.css"> | |
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> | |
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script> | |
<script src="https://unpkg.com/higlass-time-interval-track@0.1.6/dist/higlass-time-interval-track.js"></script> | |
<script src="https://unpkg.com/higlass-multivec@0.2.0-alpha.6/dist/higlass-multivec.js"></script> | |
<script src="https://unpkg.com/higlass-labelled-points-track@0.1.6/dist/higlass-labelled-points-track"></script> | |
<script src="https://unpkg.com/higlass-arcs@0.1.3/dist/higlass-arcs.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> | |
</head> | |
<body > | |
<div class="wp-caption alignleft"> | |
<div id="development-demo" style="width: 1000px; height: 1000px"></div> | |
</div> | |
</body> | |
<script src='hglib.js'> | |
</script> | |
<script> | |
var testViewConfig = { | |
views: [ | |
{ | |
uid: 'a', | |
tracks: { | |
top: [ | |
{ | |
type: 'top-axis', | |
} | |
], | |
center: [ | |
{ | |
uid: 'x', | |
type: 'simple-svg', | |
}], | |
left: [ | |
{ | |
type: 'left-axis', | |
} | |
] | |
}, | |
}, | |
] | |
}; | |
const api = hglib.viewer( | |
document.getElementById('development-demo'), | |
testViewConfig, | |
{ | |
bounded: true, | |
} | |
); | |
const svgTrack = api.getTrackObject('x'); | |
const gMain = svgTrack.gMain; | |
const points = gMain.selectAll('.points') | |
.data([1,2,3]) | |
.enter() | |
.append('rect') | |
.classed('points', true) | |
.attr('x', d => d * 30) | |
.attr('y', d => d * 30) | |
.attr('width', 10) | |
.attr('height', 10) | |
.style('fill', 'black'); | |
// console.log('points:', points); | |
api.on('location', (location) => { | |
console.log('location:', location); | |
gMain.selectAll('.points') | |
.attr('x', d => svgTrack._xScale(d * 30)) | |
.attr('y', d => svgTrack._yScale(d * 30)); | |
}); | |
</script> | |
<script> | |
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); | |
ga('create', 'UA-77756807-1', 'auto'); | |
ga('send', 'pageview'); | |
</script> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment