vuejs plus d3

最新推荐文章于 2024-07-02 18:58:29 发布

matiascx

最新推荐文章于 2024-07-02 18:58:29 发布

阅读量570

点赞数

本文链接：https://blog.csdn.net/matiascx/article/details/76421395

版权

vuejs 是一个数据驱动视图的前端框架，一切皆可以作为可重用的组件加以使用。

d3则是数据可视化javascript库，如何将二者的长处相结合是一个挑战。

https://tyronetudehope.com/2016/12/13/composing-d3-visualizations-with-vuejs/

<script>
import * as d3 from 'd3';
const data = [99, 71, 78, 25, 36, 92];
export default {
  name: 'non-vue-line-chart',
  template: '<div></div>',
  mounted() {
    const svg = d3.select(this.$el)
      .append('svg')
      .attr('width', 500)
      .attr('height', 270)
      .append('g')
      .attr('transform', 'translate(0, 10)');
    const x = d3.scaleLinear().range([0, 430]);
    const y = d3.scaleLinear().range([210, 0]);
    d3.axisLeft().scale(x);
    d3.axisTop().scale(y);
    x.domain(d3.extent(data, (d, i) => i));
    y.domain([0, d3.max(data, d => d)]);
    const createPath = d3.line()
      .x((d, i) => x(i))
      .y(d => y(d));
    svg.append('path').attr('d', createPath(data));
  },
};
</script>

<style lang="sass">
svg
  margin: 25px;
  path
    fill: none
    stroke: #76BF8A
    stroke-width: 3px
</style>