現(xiàn)在用D3.js + react做一個帶坐標軸和比例尺的柱形圖。我已經盡力把代碼全部注釋上了，最后我也會把完整柱形圖代碼奉上。如果還有疑惑的，可以去翻看一下我之前介紹的方法，以下方法都有介紹到。
還有數(shù)據(jù)都是自己定義的假數(shù)據(jù)，大家參考一下制作方法即可。
首先定義柱形圖的數(shù)據(jù)、繪圖區(qū)域的寬高、和上下左右的邊距:
var width = 600; //SVG繪制區(qū)域的寬度
var height = 500; //SVG繪制區(qū)域的高度
//定義數(shù)據(jù)
var dataList = [50,43,120,87,99,167,142]
//定義上下左右的邊距
var padding = {top:20,right:20,bottom:100,left:100}然后設定SVG:
var svg = d3.select("#body") //選擇id為body的div
.append("svg") //在<body>中添加<avg> .attr("width",width) //設定<svg>的寬度屬性
.attr("height",height) //設定<svg>的高度屬性定義比例尺:
//定義比例尺 //x軸寬度 var xAxisWidth = 300; //y軸寬度 var yAxisWidth = 300; //x軸比例尺(序數(shù)比例尺) var xScale = d3.scale.ordinal() //構建一個序數(shù)比例尺 .domain(d3.range(dataList.length)) //設定定義域 .rangeRoundBands([0,xAxisWidth],0.2)//代替range()設定值域，并將結果取整 //y軸比例尺(線性比例尺) var yScale = d3.scale.linear() //創(chuàng)建一個線性比例尺 .domain([0,d3.max(dataList)]) //設定定義域 .range([0,yAxisWidth]) //設定值域
然后添加矩形:
//添加矩形
svg.selectAll("rect")
.data(dataList) //綁定數(shù)據(jù)
.enter() //獲取enter部分
.append("rect") //添加rect元素，使其與綁定數(shù)組的長度一致
.attr("fill","fuchsia") //設置顏色
.attr("x",function(d,i){ //設置矩形的x坐標
return padding.left+xScale(i)
})
.attr("y",function(d){ //設置矩形的y坐標
return height - padding.bottom-yScale(d)
})
.attr("width",xScale.rangeBand()) //設置矩形的寬度
.attr("height",function(d){ //設置矩形的高度
return yScale(d)
})然后為矩形添加文字標簽:
//為矩形添加標簽文字
svg.selectAll("text")
.data(dataList) //綁定數(shù)據(jù)
.enter() //獲取enter部分
.append("text") //添加text元素，使其與綁定數(shù)組的長度一致
.attr("fill","white") //字體顏色
.attr("font-size","14px") //字體大小
.attr("text-anchor","middle") //文本相對基點的位置
.attr("x",function(d,i){ //設置文字的x坐標
return padding.left+xScale(i)
})
.attr("y",function(d){ //設置文字的y坐標
return height - padding.bottom - yScale(d)
})
.attr("dx",xScale.rangeBand()/2) //相對于當前位置在x方向上平移的距離
.attr("dy","2em") //相對于當前位置在y方向上平移的距離
.text(function(d){ //文字內容
return d
})最后定義坐標軸:
//定義坐標軸
//x軸
var xAxis = d3.svg.axis() //創(chuàng)建一個默認的新坐標軸
.scale(xScale) //設定坐標軸的比例尺
.orient("bottom") //設定坐標軸的方向
//重新設置y軸比例尺的值域，與原來的相反
yScale.range([yAxisWidth,0])
//y軸
var yAxis = d3.svg.axis() //創(chuàng)建一個默認的新坐標軸
.scale(yScale) //設定坐標軸的比例尺
.orient("left") //設定坐標軸的方向
//添加x軸和平移
svg.append("g") //在svg中添加一個包含坐標軸各元素的g元素
.attr("class","axis") //定義class名
.attr("transform","translate("+padding.left + "," + (height-padding.bottom)+")") //將x軸進行平移
.call(xAxis) //將自身作為參數(shù)傳遞給xAxis函數(shù)
//添加y軸和平移
svg.append("g") //在svg中添加一個包含坐標軸各元素的g元素
.attr("class","axis") //定義class名
.attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth)+")") //將y軸進行平移
.call(yAxis) //將自身作為參數(shù)傳遞給yAxis函數(shù)大家看一下效果圖:
完整代碼:
import React, { Component } from 'react';
import * as d3 from 'd3'; //引入d3
class Bar extends Component {
constructor(props) {
super(props);
this.state = {}
}
componentDidMount(){ //將方法在componentDidMount生命周期鉤子函數(shù)中面調用
this.oneMethod()
}
oneMethod(){
var width = 600; //SVG繪制區(qū)域的寬度
var height = 500; //SVG繪制區(qū)域的高度
//定義數(shù)據(jù)
var dataList = [50,43,120,87,99,167,142]
//定義上下左右的邊距
var padding = {top:20,right:20,bottom:100,left:100}
var svg = d3.select("#body") //選擇id為body的div
.append("svg") //在<body>中添加<avg>
.attr("width",width) //設定<svg>的寬度屬性
.attr("height",height) //設定<svg>的高度屬性
//定義比例尺
//x軸寬度
var xAxisWidth = 300;
//y軸寬度
var yAxisWidth = 300;
//x軸比例尺(序數(shù)比例尺)
var xScale = d3.scale.ordinal() //構建一個序數(shù)比例尺
.domain(d3.range(dataList.length)) //設定定義域
.rangeRoundBands([0,xAxisWidth],0.2)//代替range()設定值域，并將結果取整
//y軸比例尺(線性比例尺)
var yScale = d3.scale.linear() //創(chuàng)建一個線性比例尺
.domain([0,d3.max(dataList)]) //設定定義域
.range([0,yAxisWidth]) //設定值域
//添加矩形
svg.selectAll("rect")
.data(dataList) //綁定數(shù)據(jù)
.enter() //獲取enter部分
.append("rect") //添加rect元素，使其與綁定數(shù)組的長度一致
.attr("fill","fuchsia") //設置顏色
.attr("x",function(d,i){ //設置矩形的x坐標
return padding.left+xScale(i)
})
.attr("y",function(d){ //設置矩形的y坐標
return height - padding.bottom-yScale(d)
})
.attr("width",xScale.rangeBand()) //設置矩形的寬度
.attr("height",function(d){ //設置矩形的高度
return yScale(d)
})
//為矩形添加標簽文字
svg.selectAll("text")
.data(dataList) //綁定數(shù)據(jù)
.enter() //獲取enter部分
.append("text") //添加text元素，使其與綁定數(shù)組的長度一致
.attr("fill","white") //字體顏色
.attr("font-size","14px") //字體大小
.attr("text-anchor","middle") //文本相對基點的位置
.attr("x",function(d,i){ //設置文字的x坐標
return padding.left+xScale(i)
})
.attr("y",function(d){ //設置文字的y坐標
return height - padding.bottom - yScale(d)
})
.attr("dx",xScale.rangeBand()/2) //相對于當前位置在x方向上平移的距離
.attr("dy","2em") //相對于當前位置在y方向上平移的距離
.text(function(d){ //文字內容
return d
})
//定義坐標軸
//x軸
var xAxis = d3.svg.axis() //創(chuàng)建一個默認的新坐標軸
.scale(xScale) //設定坐標軸的比例尺
.orient("bottom") //設定坐標軸的方向
//重新設置y軸比例尺的值域，與原來的相反
yScale.range([yAxisWidth,0])
//y軸
var yAxis = d3.svg.axis() //創(chuàng)建一個默認的新坐標軸
.scale(yScale) //設定坐標軸的比例尺
.orient("left") //設定坐標軸的方向
//添加x軸和平移
svg.append("g") //在svg中添加一個包含坐標軸各元素的g元素
.attr("class","axis") //定義class名
.attr("transform","translate("+padding.left + "," + (height-padding.bottom)+")") //將x軸進行平移
.call(xAxis) //將自身作為參數(shù)傳遞給xAxis函數(shù)
//添加y軸和平移
svg.append("g") //在svg中添加一個包含坐標軸各元素的g元素
.attr("class","axis") //定義class名
.attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth)+")") //將y軸進行平移
.call(yAxis) //將自身作為參數(shù)傳遞給yAxis函數(shù)
}
render() {
return (
<div id="body" >
</div>
);
}
}
export default Bar;總結
以上所述是小編給大家介紹的D3.js(v3)+react 實現(xiàn)帶坐標與比例尺的柱形圖 (V3版本),希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 m.alabama37th.com 版權所有
違法及侵權請聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
