利用Vue与D3.js创建交互式数据可视化

vue create vue-d3-demo

cd vue-d3-demo

npm install d3

<template>
  <div>
    <svg :width="width" :height="height"></svg>
  </div>
</template>

<script>
import * as d3 from "d3";

export default {
  name: "BarChart",
  props: {
    data: {
      type: Array,
      required: true
    },
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 300
    }
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      const svg = d3.select("svg");
      svg.selectAll("*").remove(); // 清除之前的内容

      const x = d3.scaleBand()
        .domain(this.data.map(d => d.name))
        .range([0, this.width])
        .padding(0.1);

      const y = d3.scaleLinear()
        .domain([0, d3.max(this.data, d => d.value)])
        .nice()
        .range([this.height, 0]);

      svg.append("g")
        .attr("transform", `translate(0, ${this.height})`)
        .call(d3.axisBottom(x));

      svg.append("g")
        .call(d3.axisLeft(y));

      svg.selectAll(".bar")
        .data(this.data)
        .enter().append("rect")
        .attr("class", "bar")
        .attr("x", d => x(d.name))
        .attr("y", d => y(d.value))
        .attr("width", x.bandwidth())
        .attr("height", d => this.height - y(d.value))
        .attr("fill", "steelblue")
        .on("mouseover", function (event, d) {
          d3.select(this).attr("fill", "orange");
        })
        .on("mouseout", function (event, d) {
          d3.select(this).attr("fill", "steelblue");
        });
    }
  }
};
</script>

<style scoped>
.bar {
  transition: fill 0.2s;
}
</style>

<template>
  <div id="app">
    <BarChart :data="chartData" />
  </div>
</template>

<script>
import BarChart from "./components/BarChart.vue";

export default {
  name: "App",
  components: {
    BarChart
  },
  data() {
    return {
      chartData: [
        { name: "A", value: 30 },
        { name: "B", value: 80 },
        { name: "C", value: 45 },
        { name: "D", value: 60 },
        { name: "E", value: 20 },
        { name: "F", value: 90 },
        { name: "G", value: 55 }
      ]
    };
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

npm run serve