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.
67 lines
1.4 KiB
67 lines
1.4 KiB
<!-- |
|
|
|
Links: |
|
.vue files: https://vuejs.org/v2/guide/single-file-components.html |
|
|
|
Advanced: |
|
D3.append: https://github.com/d3/d3-selection/blob/master/src/selection/index.js |
|
|
|
--> |
|
|
|
<template> |
|
<svg id="bars-style-basic-svg" width="500" height="300"></svg> |
|
</template> |
|
|
|
<script> |
|
const d3 = require('d3'); |
|
|
|
export default { |
|
mounted: function() { |
|
var svg = d3.select(this.$el); |
|
var width = +svg.attr('width'); |
|
var height = +svg.attr('height'); |
|
var data = [ |
|
{name: 'one', val: 100}, |
|
{name: 'two', val: 150}, |
|
{name: 'three', val: 200} |
|
] |
|
|
|
var x = d3.scaleBand() |
|
.rangeRound([0, width]).padding(0.1) |
|
.domain(data.map(d => d.name)); |
|
var y = d3.scaleLinear() |
|
.rangeRound([height, 0]) |
|
.domain([0, d3.max(data, d => d.val)]) |
|
|
|
svg |
|
.selectAll('rect') |
|
.data(data) |
|
.enter() |
|
.append('rect') |
|
.attr('x', d => x(d.name)) |
|
.attr('class', d => d.name) |
|
.attr('y', d => y(d.val)) |
|
.attr('width', x.bandwidth()) |
|
.attr('height', d => height - y(d.val)) |
|
} |
|
} |
|
</script> |
|
|
|
<style> |
|
/* |
|
#bars-style-basic-svg |
|
will be added to global namespace |
|
*/ |
|
#bars-style-basic-svg .one { |
|
fill: #ffc300 |
|
} |
|
#bars-style-basic-svg .two { |
|
fill: #c70039 |
|
} |
|
#bars-style-basic-svg .three { |
|
fill: #571845 |
|
} |
|
#bars-style-basic-svg { |
|
margin-top: 40px; |
|
} |
|
</style>
|
|
|