1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
    <h2>直方图</h2>
    <div id="bar-chart-container">
    <!--定义一个 bar-chart-container 的容器，以供 D3 操作。-->
      <p v-for="(char, i) in alphabet" :key="i">
        <span>{{ char.letter }}</span>
        <span>{{ char.frequency }}</span>
        <!--打印出json数据-->
      </p>
    </div>
</template>

<script>
  import axios from "axios";
  export default {
    /**
     * 在挂载后即开始执行
     */
    mounted() {
      axios.get("./test.json").then((res) => {
        console.log(res.data);
      });
    },
  };
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!--HelloWorld msg="Hello Vue 3 + Vite" /-->
  <BarChart />
</template>

<script>
import BarChart from "./components/BarChart.vue";
export default {
  name:"App",
  components:{
    BarChart,
  },
};
</script>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
  const width = 800;
  const height = 500;

  // 初始化 SVG 元素
  const svg = d3
    .select("#bar-chart-container")
    .append("svg")
    .attr("class", "bar-chart")
    .attr("viewBox", `0 0 ${width} ${height}`)
    .attr("width", width)
    .attr("height", height)
    .append("g");

  // https://observablehq.com/@d3/d3-scaleband
  // x 轴的缩放比例尺
  const x = d3
    .scaleBand()
    .domain(d3.range(data.length))
    .range([margin.left, width - margin.right])
    .padding(0.1);

  // y 轴的缩放比例尺
  const y = d3
    .scaleLinear()
    .domain([0, d3.max(data, (d) => d.value)])
    .nice()
    .range([height - margin.bottom, margin.top]);

  // x 坐标轴
  // tickSizeOuter(0) 移除 0 处初始的标记
  // tickFormat https://github.com/d3/d3-scale/blob/master/README.md#tickFormat
  const xAxis = (g) =>
    g.attr("transform", `translate(0,${height - margin.bottom})`).call(
      d3
        .axisBottom(x)
        .tickFormat((i) => data[i].name)
        .tickSizeOuter(0)
    );

  // y 坐标轴
  const yAxis = (g) =>
    g
      .attr("transform", `translate(${margin.left},0)`)
      .call(d3.axisLeft(y).ticks(null, data.format))
      // 移除区域间的竖线
      .call((g) => g.select(".domain").remove())
      .call((g) =>
        g
          .append("text")
          .attr("x", -margin.left)
          .attr("y", 10)
          .attr("fill", "currentColor")
          .attr("text-anchor", "start")
          .text(data.y)
      );

  svg
    .append("g")
    .attr("fill", this.color)
    .selectAll("rect")
    .data(data)
    .join("rect")
    .attr("x", (d, i) => x(i))
    .attr("y", (d) => y(d.value))
    .attr("height", (d) => y(0) - y(d.value))
    .attr("width", x.bandwidth());

  // 绘制到 SVG
  svg.append("g").call(xAxis);
  svg.append("g").call(yAxis);
},