創建一個容器

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，否則會覆蓋

總結

以上是生活随笔為你收集整理的d3中文案例_D3.js柱状图例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。