You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
778 B
43 lines
778 B
<!-- |
|
|
|
Based on: |
|
|
|
Links: |
|
|
|
--> |
|
|
|
<template> |
|
<svg width="500" height="400"></svg> |
|
</template> |
|
|
|
<script> |
|
|
|
import PH2 from './ph2/index'; |
|
const d3 = require('d3'); |
|
|
|
export default { |
|
props: ['groupBy', 'data'], |
|
watch: { |
|
groupBy: function(groupBy) { |
|
this.ph2.setLayout(groupBy); |
|
}, |
|
data: function(data) { |
|
this.ph2.setData(data); |
|
} |
|
}, |
|
mounted: function() { |
|
var svg = d3.select(this.$el); |
|
var width = +svg.attr('width'); |
|
var height = +svg.attr('height'); |
|
|
|
var that = this; |
|
var bubblesG = svg.append('g').attr('transform', `translate(${width/2}, ${height/2})`) |
|
|
|
// TODO: remove it later |
|
d3.csv('static/data/earthquakes.csv', function(data) { |
|
that.ph2 = new PH2(bubblesG, data, that.groupBy); |
|
}); |
|
} |
|
|
|
} |
|
</script>
|
|
|