前言

Day 6 畫單條線的折線圖，今天的作法如法炮製，引用別人的程式碼，修改參數畫圖。

開始畫圖

1. 參考 d3 gallery multi-line chart, 複製程式碼

   https://observablehq.com/@d3/multi-line-chart
   

2. 使用 Day 5 的資料，修改傳入的資料

   • x: d => new Date (d.資料時間)
   • y: d => d.海外生產比
   • z: d => d.分類

chart = LineChart(foreign_production_categories, {
  x: d => new Date (d.資料時間),
  y: d => d.海外生產比,
  z: d => d.分類,
  yLabel: "外銷訂單海外生產比 (%)",
  yDomain: [0, 100],
  width,
  height: 500,
  color: "#fd6246",
})

3. 執行程式碼畫圖
   

4. 美化折線圖

   • font-size :調整字大小

     

   • strokeWidth : 調整線條出粗細

     

   • 修改後的圖

   

結論

使用 d3 畫圖有更多的變化，當游標移動到選擇的資料時，會顯示不同的顏色和文字。