Axes 軸線

d3.axisBottom( )

程式碼

            
              //JS
              const data = [
              { x: 10, y: 100 },
              { x: 20, y: 100 },
              { x: 30, y: 100 },
              { x: 90, y: 20 },
              { x: 220, y: 10 },
            ];
      
            // 抓出 x 軸要使用的資料
            const xData = data.map((i) => i.x);
      
            // 設定X軸的比例尺與繪製範圍
            const xScale = d3
              .scaleLinear()
              .domain([0, d3.max(xData)])
              .range([10, 290]);
      
            //使用xScale的設定，繪製刻度(ticks)朝下的軸線
            const xAxis = d3.axisBottom(xScale);
      
            // 繪製軸線
            d3.select(".axis")
              .append("g")
              .call(xAxis)
                // 調整X軸位置
              .attr("transform", "translate(0,130)");