前言

昨天的 bar line chart 看起來仍有缺點，2020 年和 2021 年的折線圖很難直覺地看出實際的年增率是多少，所以要將資料加上標示會比較清楚。

加上折線圖標示

• 在昨天的程式碼範例中加入圓形

  // 加入圓形標示
  svg.selectAll("circle")
    .data(data)
    .join("circle")
    .attr("cx", (d, i) => x(d.資料時間) + x.bandwidth() / 2)
    .attr("cy", d => y2(d.年增率))
    .attr("r", x.bandwidth() / 8);

• 完整程式碼

chart = {
  // 建立 svg，指定尺寸
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

  // 加入 group
  svg.append("g")
      .attr("fill", "orange")
      .attr("fill-opacity", 0.8)
    .selectAll("rect")
    .data(data) // 綁定資料
    .join("rect") // 加入矩形
      .attr("x", d => x(d.資料時間))
      .attr("width", x.bandwidth())
      .attr("y", d => y1(d.金額)) // 左邊 y 軸
      .attr("height", d => y1(0) - y1(d.金額)) // 由下往上畫出長條圖;

  // 加入直線
  svg.append("path")
      .attr("fill", "none")
      .attr("stroke", "currentColor")
      .attr("stroke-miterlimit", 1) // 調整線段轉折處圓角
      .attr("stroke-width", 5)
      .attr("d", line(data));

  // 加入圓形標示
  svg.selectAll("circle")
    .data(data)
    .join("circle")
    .attr("cx", (d, i) => x(d.資料時間) + x.bandwidth() / 2)
    .attr("cy", d => y2(d.年增率))
    .attr("r", x.bandwidth() / 8);

  // 加入 x 軸
  svg.append("g")
      .call(xAxis)
      .attr("font-size", 14);

  // 加入 y1 軸
  svg.append("g")
      .call(y1Axis)
      .attr("font-size", 14);

  // 加入 y2 軸
  svg.append("g")
      .call(y2Axis)
      .attr("font-size", 14);

  // 加入格線
  svg.append('g').call(yGrid)

  return svg.node();
}

• 加上標示的完成圖
  

結論

從 2019 年到 2021 年，年增加率持續上升，不加上標示看起來是一條直線，折線圖加上圓形標示可以清楚的比較每年的年增率高低和實際值。