D3超简单入门教程（二）——稍微复杂条形图

 

本文来说说怎么画一个复杂一点的条形图，不是说样式上有多么负责，是在功能，体验上稍微复杂一些的条形图。老规矩，先上代码：

 

组件：

 

<template>
  <div id="container" class="svg-container" align="center">
    <h1>{
  {title}}</h1>
    <svg :width="svgWidth" :height="svgHeight">
      <g>
        <rect
          v-for="item in data"
          class="bar-positive"
          :key="item[xKey]"
          :x="xScale(item[xKey])"
          :y="yScale(0)"
          :width="xScale.bandwidth()"
          :height="0"
        ></rect>
        <text v-for="item in data"
          :key="item[xKey]"
              :x="xScale(item[xKey])+30"
              :y="yScale(item[yKey]) - 2"
              fill="red">
          {
  {item[xKey]}} {
  {item[yKey]}}
        </text>
      </g>
    </svg>
  </div>
</template>

<script>
import {scaleBand} from 'd3-scale'
import {max, min} from 'd3-array'
import {selectAll} from 'd3-selection'
import {scaleLinear} from 'd3'

export default {
  name: 'demo007',
  props: {
    title: String,
    xKey: String,
    yKey: String,
    data: Array
  },
  mounted () {
    this.svgWidth = document.getElementById('container').offsetWidth * 0.95
    this.AddResizeListener()
    this.AnimateLoad()
  },
  data: () => ({
    svgWidth: 0,
    redrawToggle: true
  }),
  methods: {
    // 绘制柱状图
    AnimateLoad () {
      selectAll('rect')
        .data(this.data)