Responsive Chart

程式碼

          
            <div class="responsive" 
                style="border: 1px solid rgb(96, 96, 96)">
            </div>
          
        

          
            const currentWidth = parseInt(d3.select(".responsive").style("width"));
            const height = 400;
            const margin = 40;
    
            const svg = d3
              .select(".responsive")
              .append("svg")
              .attr("width", currentWidth)
              .attr("height", height)
              .style("border", "1px solid rgb(96,96,96)");
    
            const data = [
              { x: 100, y: 20 },
              { x: 18, y: 30 },
              { x: 90, y: 150 },
            ];
    
            // 抓出xy軸需要用的資料
            const xData = data.map((i) => i.x); // 得到 [100, 18, 90] 陣列
            const yData = data.map((i) => i.y); // 得到 [20, 30, 150] 陣列
    
            // x軸比例尺與軸線
            const xScale = d3
              .scaleLinear()
              .domain([0, d3.max(xData)])
              .range([margin, currentWidth - margin]);
    
            const xAxisGenerator = d3.axisBottom(xScale);
            const xAxis = svg
              .append("g")
              .call(xAxisGenerator)
              .attr("transform", `translate(0,${height - margin})`);
    
            // y軸比例尺與軸線
            const yScale = d3
              .scaleLinear()
              .domain([0, d3.max(yData)])
              .range([height - margin * 2, 0])
              .nice();
    
            const yAxisGenerator = d3.axisLeft(yScale);
            const yAxis = svg
              .append("g")
              .call(yAxisGenerator)
              .attr("transform", `translate(${margin},${margin})`);