碼字不易—口水少來–有用請好評-打賞也行喔
為了初學者，本文儘量細緻再細緻，覺得太囉嗦的大牛繞過—-我膜拜您
需求：完整柱狀圖
備註：前奏選擇器、比例尺、座標軸等基礎知識不在贅敘，下面會有相關連結；
推薦連結：別個的教程 https://blog.csdn.net/qq_34414916/article/details/80029352
正文開始：
本文旨在封裝一個基於d3 多端適配的柱狀圖元件 所以大家看到的會是一個方法；
方法外殼：

MendegBar = (DataObject) => {
        //移動端適配 預計padding以及width、height會通過一個膠著方法，以此判斷是否進行適配
 

        let { dom = "", height, width, padding = { top: 20, left: 20, bottom: 20, right: 20 } } = DataObject;
        if (dom === "") {
            console.log("dom不存在 ！");
        }
        //padding:圖表分組位置引數
        //沒有傳入height時便獲取dom的寬高
        height ? null : height = d3.select(dom).node().getBoundingClientRect().
 
height;
        width ? null : width = d3.select(dom).node().getBoundingClientRect().width;
    }

首先需要畫布，也就是即將展現資料的地方（區域），推薦使用svg

 //新建畫布
        let svg = d3
            .select(dom)
            .append("svg")
            .attr("height", height)
            .attr("width", width)
            .style
 
("background", "#fff");

有了畫布，我們得為以後的操作流出餘地，也就是可能會出現一個畫布好幾個圖表的情況發生，所以需要一個組，用來將我們的一個個圖表裝起來；

//定義一個裝圖表的分組並且確定他的位置
        svg.append("g").attr("transform", "translate(" + padding.top + "," + padding.left + ")").attr("background", "skyblue");

資料，為方便學習，此處資料並未提出方法外

 // 資料集
        let data = [100,200,50,20,400,80];

 //為x軸 y軸新增座標軸 該方法考慮抽出作為獨立api d3.scaleBand() 序數比例尺 .domain()輸入域 range() 輸出域 
        // d3.range(0, 10, 1) 返回一個算數級陣列  例如 [0,1,2,3.......9]  (開始，結束，分度)
        //此處為省略了 開始（0） 分度（1） 採取他們的預設值 （0，data.length,1）  d3.range(data.length) data.length為終止數 注意 生成序列並不包括 data.length
        // .rangeRound()設定比例尺的輸出範圍並四捨五入 
        // d3.scaleBand().domain(d3.range(data.length)).rangeRound([0,width-padding.left-padding.right])  
        // d3.scaleBand()比例尺的輸入域是 [0,1,2,...,data,length-1] 輸出域是 [0,500-20-20];
        // scaleBand()序數比例尺  scaleLinear()線性比例尺
        let xScale = d3.scaleBand()
            .domain(d3.range(data.length)).rangeRound([0, width - padding.left - padding.right]);
        // y軸輸入域 [0,400] 輸出域 [500-20-20,0]
        let yScale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height - padding.top - padding.bottom, 0]);
        // 座標軸
        //  .axisBottom(canshu) 建立向下的座標軸 引數是比例尺 axisLeft向左的座標軸 
        let xAxis = d3.axisBottom(xScale);
        let yAxis = d3.axisLeft(yScale);
        // 到這一步 柱狀圖的基本架子已經搭起來了，下面需要做的便是怎麼把資料呈現了
         //將座標軸元件加入當前圖表分組
        g.append("g")
            .attr("transform", "translate(" + 0 + "," + (height - padding.top - padding.bottom) + ")")
            .call(xAxis);
        g.append("g")
            .attr("transform", "translate(0,0)")
            .call(yAxis);

下面一步便是將資料呈現，那麼我們就需要svg裡的各種標籤元件上手了。

//首先 為每一個數據（一個矩形）建立一個分組組g 這裡出現一個概念 enter（） 這裡的意思是根據資料補全g
        //本來g.selectAll(".rect") 是獲取不到東西的 但是 .data(data).enter().append("g")以後 data有多少資料，我就給他補全多少g
        // 題外話：data（）將資料繫結到選擇集上 
        let g_s = g.selectAll(".rect")
            .data(data)
            .enter()
            .append("g");
        // console.log("神奇的enter",g_s);// 為了效果更明顯  [g, g, g, g, g, g]

        // 現在正主來了 為資料畫出一片天地 嘎嘎，就是矩形來著
        //科普一下 svg的基礎哈 
        /*
            svg 預定義形狀元素
            矩形 <rect>
            圓形 <circle>
            橢圓 <ellipse>
            線 <line>
            折線 <polyline>
            多邊形 <polygon>
            路徑 <path> 高大上 ，就是條線而已 可以設定開始和結束喲
            <text> 元素用於定義文字。
            rect 的屬性：      
            rect 元素的 width 和 height 屬性可定義矩形的高度和寬度
            style 屬性用來定義 CSS 屬性
            CSS 的 fill 屬性定義矩形的填充顏色（rgb 值、顏色名或者十六進位制值）
            CSS 的 stroke-width 屬性定義矩形邊框的寬度
            CSS 的 stroke 屬性定義矩形邊框的顏色
            x 屬性定義矩形的左側位置（例如，x="0" 定義矩形到瀏覽器視窗左側的距離是 0px） 在這裡呢就是座標軸的位置 咱自己的座標軸
            y 屬性定義矩形的頂端位置（例如，y="0" 定義矩形到瀏覽器視窗頂端的距離是 0px）
            CSS 的 fill-opacity 屬性定義填充顏色透明度（合法的範圍是：0 - 1）
            CSS 的 stroke-opacity 屬性定義筆觸顏色的透明度（合法的範圍是：0 - 1）
            CSS 的 opacity 屬性定義整個元素的透明值（合法的範圍是：0 - 1）

        */
        //這是每個矩形之間的距離
        let rectPadding = 30;
        g_s.append("rect")
            .attr("x", function (d, i) {
                // d 資料 單項資料 i 索引
                return xScale(i) + rectPadding / 2;
                // 這個意思還用我解釋嗎？還是解釋一下吧，嘎嘎，我一定是個好老師
                // 每一個rect "x" 屬性的值 都等於 處於x軸的刻度的值（等差數列喔）加上 每個矩形之間的距離的一半喔
                //   xScale(i) 2 78 154 .. 然後第一個的x軸位置是多少呢 那當然是2啦 不過咱們得有間距 所以得加上間距 然後呢還得砍掉一半
                // 別問我為什麼，揍你
            })
            .attr("y", function (d) {
                return yScale(d);
                // 參照上面 強調依據 x y 相對於我們自己的座標軸來的哈
            })
            .attr("width", function () {
                //科普一下哈 xScale.step() 這個得到的是每一個等差刻度的寬喔 這裡是 76
                //所以下面為什麼會這麼return 不用我再多說了吧
                return xScale.step() - rectPadding;
            })
            .attr("height", function (d) {
                console.log(d, yScale(400));
                //這個呢，能看明白不 設定高 算了 為防止一些yt看不明白 小說一下
                //總高度 - 上下空白 -  yScale(d)（資料d時，y軸的輸出是多少）
                //回顧y軸比例尺 [height - padding.top - padding.bottom, 0] 倒著來的喔
                // 所以d越大，對應在y軸的值就越小  400 時 yScale(400)//0 
                //明白不，再不明白趴著讓我打屁屁就明白了 嘿嘿
                return height - padding.top - padding.bottom - yScale(d);
            })
            .attr("fill", "skyblue");//這個呢就是矩形顏色的幹活 （最近看個抗日劇、那劇情......）


        //最後 給每個矩形加上文字 
        /*
            <text> 元素用於定義文字。
            屬性：
            主要屬性有：x,y,dx,dy,rotate,textLength,lengthAdjust
            x,y表示文字的橫縱座標。
            dx,dy表示移動的橫縱座標。
            rotate表示旋轉的度數。
        */
        //下面的運算不在解釋
        g_s.append("text")
            .attr("x", function (d, i) {
                return xScale(i) + rectPadding / 2;
            })
            .attr("y", function (d) {
                return yScale(d);
            })
            .attr("dx", function () {
                (xScale.step() - rectPadding) / 2;
            })
            .attr("dy", 20)
            .text(function (d) {
                return d;
            })

至此一個完整的柱狀圖就已經完成了，下篇文章就是圖示互動了，敬請期待。。。。。