D3.js(v3)+react如何實(shí)現(xiàn)帶坐標(biāo)與比例尺的柱形圖-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)D3.js(v3)+react如何實(shí)現(xiàn)帶坐標(biāo)與比例尺的柱形圖，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站專注于成都網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)頁設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對(duì)待客戶，用專業(yè)的服務(wù)創(chuàng)造價(jià)值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

現(xiàn)在用D3.js + react做一個(gè)帶坐標(biāo)軸和比例尺的柱形圖。我已經(jīng)盡力把代碼全部注釋上了，最后我也會(huì)把完整柱形圖代碼奉上。如果還有疑惑的，可以去翻看一下我之前介紹的方法，以下方法都有介紹到。

還有數(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}

然后設(shè)定SVG:

 var svg = d3.select("#body")     //選擇id為body的div
     .append("svg")      //在<body>中添加<avg>      .attr("width",width)    //設(shè)定<svg>的寬度屬性
      .attr("height",height)    //設(shè)定<svg>的高度屬性

定義比例尺:

//定義比例尺
  //x軸寬度
  var xAxisWidth = 300;
  //y軸寬度
  var yAxisWidth = 300;

  //x軸比例尺(序數(shù)比例尺)
  var xScale = d3.scale.ordinal()     //構(gòu)建一個(gè)序數(shù)比例尺
     .domain(d3.range(dataList.length)) //設(shè)定定義域
     .rangeRoundBands([0,xAxisWidth],0.2)//代替range()設(shè)定值域，并將結(jié)果取整
  //y軸比例尺(線性比例尺)
  var yScale = d3.scale.linear()     //創(chuàng)建一個(gè)線性比例尺
     .domain([0,d3.max(dataList)])  //設(shè)定定義域
     .range([0,yAxisWidth])    //設(shè)定值域

然后添加矩形:

//添加矩形
   svg.selectAll("rect")
     .data(dataList)      //綁定數(shù)據(jù)
     .enter()       //獲取enter部分
     .append("rect")      //添加rect元素，使其與綁定數(shù)組的長度一致
     .attr("fill","fuchsia")    //設(shè)置顏色
     .attr("x",function(d,i){   //設(shè)置矩形的x坐標(biāo)
      return padding.left+xScale(i)
     })
     .attr("y",function(d){    //設(shè)置矩形的y坐標(biāo)
      return height - padding.bottom-yScale(d)
     })
     .attr("width",xScale.rangeBand()) //設(shè)置矩形的寬度
     .attr("height",function(d){   //設(shè)置矩形的高度
      return yScale(d)
     })

然后為矩形添加文字標(biāo)簽:

//為矩形添加標(biāo)簽文字
    svg.selectAll("text")
     .data(dataList)      //綁定數(shù)據(jù)
     .enter()       //獲取enter部分
     .append("text")      //添加text元素，使其與綁定數(shù)組的長度一致
     .attr("fill","white")    //字體顏色
     .attr("font-size","14px")   //字體大小
     .attr("text-anchor","middle")  //文本相對(duì)基點(diǎn)的位置
     .attr("x",function(d,i){   //設(shè)置文字的x坐標(biāo)
      return padding.left+xScale(i)
     }) 
     .attr("y",function(d){    //設(shè)置文字的y坐標(biāo)
      return height - padding.bottom - yScale(d)
     })
     .attr("dx",xScale.rangeBand()/2) //相對(duì)于當(dāng)前位置在x方向上平移的距離  
     .attr("dy","2em")     //相對(duì)于當(dāng)前位置在y方向上平移的距離
     .text(function(d){     //文字內(nèi)容
      return d
     })

最后定義坐標(biāo)軸:

//定義坐標(biāo)軸
  //x軸
  var xAxis = d3.svg.axis()      //創(chuàng)建一個(gè)默認(rèn)的新坐標(biāo)軸      
     .scale(xScale)      //設(shè)定坐標(biāo)軸的比例尺
     .orient("bottom")     //設(shè)定坐標(biāo)軸的方向
  //重新設(shè)置y軸比例尺的值域，與原來的相反
  yScale.range([yAxisWidth,0])
  //y軸
  var yAxis = d3.svg.axis()      //創(chuàng)建一個(gè)默認(rèn)的新坐標(biāo)軸 
     .scale(yScale)      //設(shè)定坐標(biāo)軸的比例尺
     .orient("left")      //設(shè)定坐標(biāo)軸的方向
     
  //添加x軸和平移
  svg.append("g")         //在svg中添加一個(gè)包含坐標(biāo)軸各元素的g元素
   .attr("class","axis")      //定義class名
   .attr("transform","translate("+padding.left + "," + (height-padding.bottom)+")") //將x軸進(jìn)行平移
   .call(xAxis)        //將自身作為參數(shù)傳遞給xAxis函數(shù)
  //添加y軸和平移
  svg.append("g")         //在svg中添加一個(gè)包含坐標(biāo)軸各元素的g元素
   .attr("class","axis")      //定義class名
   .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth)+")") //將y軸進(jìn)行平移
   .call(yAxis)        //將自身作為參數(shù)傳遞給yAxis函數(shù)

大家看一下效果圖:

D3.js(v3)+react如何實(shí)現(xiàn)帶坐標(biāo)與比例尺的柱形圖

完整代碼:

import React, { Component } from 'react';
import * as d3 from 'd3'; //引入d3
class Bar extends Component {
 constructor(props) {
  super(props);
  this.state = {}
 }

 componentDidMount(){   //將方法在componentDidMount生命周期鉤子函數(shù)中面調(diào)用
  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)    //設(shè)定<svg>的寬度屬性
     .attr("height",height)    //設(shè)定<svg>的高度屬性
  //定義比例尺
  //x軸寬度
  var xAxisWidth = 300;
  //y軸寬度
  var yAxisWidth = 300;
  //x軸比例尺(序數(shù)比例尺)
  var xScale = d3.scale.ordinal()     //構(gòu)建一個(gè)序數(shù)比例尺
     .domain(d3.range(dataList.length)) //設(shè)定定義域
     .rangeRoundBands([0,xAxisWidth],0.2)//代替range()設(shè)定值域，并將結(jié)果取整
  //y軸比例尺(線性比例尺)
  var yScale = d3.scale.linear()     //創(chuàng)建一個(gè)線性比例尺
     .domain([0,d3.max(dataList)])  //設(shè)定定義域
     .range([0,yAxisWidth])    //設(shè)定值域
  //添加矩形
   svg.selectAll("rect")
     .data(dataList)      //綁定數(shù)據(jù)
     .enter()       //獲取enter部分
     .append("rect")      //添加rect元素，使其與綁定數(shù)組的長度一致
     .attr("fill","fuchsia")    //設(shè)置顏色
     .attr("x",function(d,i){   //設(shè)置矩形的x坐標(biāo)
      return padding.left+xScale(i)
     })
     .attr("y",function(d){    //設(shè)置矩形的y坐標(biāo)
      return height - padding.bottom-yScale(d)
     })
     .attr("width",xScale.rangeBand()) //設(shè)置矩形的寬度
     .attr("height",function(d){   //設(shè)置矩形的高度
      return yScale(d)
     })
  //為矩形添加標(biāo)簽文字
    svg.selectAll("text")
     .data(dataList)      //綁定數(shù)據(jù)
     .enter()       //獲取enter部分
     .append("text")      //添加text元素，使其與綁定數(shù)組的長度一致
     .attr("fill","white")    //字體顏色
     .attr("font-size","14px")   //字體大小
     .attr("text-anchor","middle")  //文本相對(duì)基點(diǎn)的位置
     .attr("x",function(d,i){   //設(shè)置文字的x坐標(biāo)
      return padding.left+xScale(i)
     }) 
     .attr("y",function(d){    //設(shè)置文字的y坐標(biāo)
      return height - padding.bottom - yScale(d)
     })
     .attr("dx",xScale.rangeBand()/2) //相對(duì)于當(dāng)前位置在x方向上平移的距離  
     .attr("dy","2em")     //相對(duì)于當(dāng)前位置在y方向上平移的距離
     .text(function(d){     //文字內(nèi)容
      return d
     })
  //定義坐標(biāo)軸
  //x軸
  var xAxis = d3.svg.axis()      //創(chuàng)建一個(gè)默認(rèn)的新坐標(biāo)軸      
     .scale(xScale)      //設(shè)定坐標(biāo)軸的比例尺
     .orient("bottom")     //設(shè)定坐標(biāo)軸的方向
  //重新設(shè)置y軸比例尺的值域，與原來的相反
  yScale.range([yAxisWidth,0])
  //y軸
  var yAxis = d3.svg.axis()      //創(chuàng)建一個(gè)默認(rèn)的新坐標(biāo)軸 
     .scale(yScale)      //設(shè)定坐標(biāo)軸的比例尺
     .orient("left")      //設(shè)定坐標(biāo)軸的方向
  //添加x軸和平移
  svg.append("g")         //在svg中添加一個(gè)包含坐標(biāo)軸各元素的g元素
   .attr("class","axis")      //定義class名
   .attr("transform","translate("+padding.left + "," + (height-padding.bottom)+")") //將x軸進(jìn)行平移
   .call(xAxis)        //將自身作為參數(shù)傳遞給xAxis函數(shù)
  //添加y軸和平移
  svg.append("g")         //在svg中添加一個(gè)包含坐標(biāo)軸各元素的g元素
   .attr("class","axis")      //定義class名
   .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth)+")") //將y軸進(jìn)行平移
   .call(yAxis)        //將自身作為參數(shù)傳遞給yAxis函數(shù)
 }
 
 render() {
  return (
   <div id="body" >
   </div>
  );
 }
}
export default Bar;

關(guān)于“D3.js(v3)+react如何實(shí)現(xiàn)帶坐標(biāo)與比例尺的柱形圖”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站名稱：D3.js(v3)+react如何實(shí)現(xiàn)帶坐標(biāo)與比例尺的柱形圖-創(chuàng)新互聯(lián)
文章鏈接：http://www.bm7419.com/article32/ihesc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站排名、企業(yè)建站、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、微信小程序

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容