D3.js柱狀圖例子

BarChart案例

demo地址
源碼地址

1.案例中接觸到的d3知識點

• 柱狀圖的繪製；

• 座標軸的繪製；

• 刻度的繪製；

• 網格線的繪製；

• 簡單的事件；

---

2.代碼分析

• 基本的參數配置

  let data = [50, 40, 120, 80, 99, 167, 142, 21];  //圖表所需數據
   let padding = {                                 //圖標距離容器上下左右的距離
       top: 40,
       right: 40,
       bottom: 40,
       left: 40 
   };
   let height = 400,                               //容器的寬高
       width = 400;
   let xAxisWidth = 300,                           //兩個座標軸的寬度
       yAxisWidth = 300;

  

• 建立一個容器

  let svg = d3.select("body").append("svg")  //在body中添加一個svg容器
       .attr("height", height)                //設置寬高  
       .attr("width", width);
  
   let tooltip=d3.select("body")             //添加一個div，主要用來顯示數據提示
       .append("div")
       .attr("class","tooltip")              //添加一個類名，方便設置樣式
       .style("opacity",0.0);                //設置透明度爲0

• 建立座標軸

  function draw(data) {……}//咱們全部繪製圖標的代碼均放在draw函數裏
  
        let xScale = d3.scale.ordinal()   //建立一個序數尺度
            .domain(d3.range(data.length))  //定義域
            .rangeRoundBands([0, xAxisWidth], 0.2);//設置padding爲0.2，設置每一個rangeBand的留白長度
  
        let yScale = d3.scale.linear()  //建立一個線性尺度
            .domain([0, d3.max(data)]) //值域
            .range([0, yAxisWidth]);   
            
        let xAxis = d3.svg.axis()   //建立x座標
            .scale(xScale)           //設定xSacle尺度
            .orient("bottom")        //座標位置在底部
         
        yScale.range([yAxisWidth, 0]);
        let yAxis = d3.svg.axis()
            .scale(yScale)
            .orient("left");
  
        svg.append("g")         //在容器中添加一個g容器，將x座標的相關體所有扔進去
            .attr("class", "axis  x-axis") //設置類名
            .attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")") //移動到合適的位置
            .call(xAxis)  //和xAxis綁定上    
                
         svg.append("g")  //y軸和x軸相似
            .attr("class", "axis y-axis")
            .attr("transform", "translate(" + padding.left + "," + (height - yAxisWidth - padding.top) + ")")
            .call(yAxis)

• 建立網格線

  d3.selectAll("g.x-axis g.tick") //選擇到刻度線
            .append("line")       //添加line，其實這也是網格線的原理
            .classed("grid-line", true)
            .attr("x1", 0) 
            .attr("y1", 0)
            .attr("x2", 0)
            .attr("y2", - (xAxisWidth)); 
            
   d3.selectAll("g.y-axis g.tick") 
            .append("line") 
            .classed("grid-line", true)
            .attr("x1", 0) 
            .attr("y1", 0)
            .attr("x2", yAxisWidth)
            .attr("y2", 0);

• 建立柱狀圖

  let updateRect = svg.selectAll("rect") //更新模式
            .data(data);
        let enterRect = updateRect.enter(); //進入模式
        let exitRect = updateRect.exit();   //退出模式
  
        enterRect.append("rect")
            .attr("fill", "lightseagreen")  //填充顏色
            .attr("x", function (d, i) {   //肯定rect的位置，寬度，高度，跟scale綁定動態變化
                return padding.left + xScale(i)
            })
            .attr("y", function (d) {
                return height - padding.bottom - yScale(d)
            })
            .attr("width", xScale.rangeBand())  //寬度
            .attr("height", function (d) {
                return yScale(d)
            })
            .on("mousemove" ,function (d,i) {//綁定鼠標事件，d：數據，i:索引
                d3.select(this)       //this當前對象
                    .transition()    //動畫
                    .duration(100)   //持續事件
                    .attr("fill","green");  //變色
                tooltip.html(d)    //爲數據提示框添加對象對應的數據
                    .style("left",(d3.event.pageX)+"px")//肯定數據提示框
                    .style("top",(d3.event.pageY -20)+"px")
                    .style("opacity",.5)
            })
            .on("mouseout",function (d,i) {
                d3.select(this)
                    .transition()
                    .duration(100)
                    .attr('fill','lightseagreen');
                tooltip.style("opacity",0.0)
            });
  
        updateRect.attr("fill", "lightseagreen")
            .attr("x", function (d, i) {
                return padding.left + xScale(i)
            })
            .attr("y", function (d) {
                return height - padding.bottom - yScale(d)
            })
            .attr("width", xScale.rangeBand())
            .attr("height", function (d) {
                return yScale(d)
            });
  
        exitRect.remove();

• 注意

  svg.selectAll('*').remove();//在draw函數添加這行代碼，在刷新時候移除svg，不然會覆蓋