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

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

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

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

還有數(shù)據都是自己定義的假數(shù)據，大家參考一下制作方法即可。

首先定義柱形圖的數(shù)據、繪圖區(qū)域的寬高、和上下左右的邊距:

var width = 600;        //SVG繪制區(qū)域的寬度
  var height = 500;        //SVG繪制區(qū)域的高度
  //定義數(shù)據
  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ù)據
     .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ù)據
     .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ù)

大家看一下效果圖:

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

完整代碼:

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ù)據
  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ù)據
     .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ù)據
     .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)帶坐標與比例尺的柱形圖”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

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

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

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

廣告

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

成都做網站