D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本)

更新時(shí)間：2019年05月09日 11:06:06 作者：溢楊年華

散點(diǎn)圖(Scatter Chart),通常是一橫一豎兩個(gè)坐標(biāo)軸，數(shù)據(jù)是一組二維坐標(biāo)，分別對(duì)應(yīng)兩個(gè)坐標(biāo)軸，與坐標(biāo)軸對(duì)應(yīng)的地方打上點(diǎn)。由此可以猜到，需要的元素包括circle(圓)和axis(坐標(biāo)軸),接下來(lái)通過(guò)本文大家分享D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本) ，一起看看

上篇文章給大家介紹了圓柱圖：http://www.dhdzp.com/article/160958.htm

散點(diǎn)圖(Scatter Chart),通常是一橫一豎兩個(gè)坐標(biāo)軸，數(shù)據(jù)是一組二維坐標(biāo)，分別對(duì)應(yīng)兩個(gè)坐標(biāo)軸，與坐標(biāo)軸對(duì)應(yīng)的地方打上點(diǎn)。由此可以猜到，需要的元素包括circle(圓)和axis(坐標(biāo)軸)。需要進(jìn)行可視化的數(shù)據(jù)有:

//圓心數(shù)據(jù)
 var center = [
 [0.5,0.5],[0.7,0.8],[0.4,0.9],
 [0.11,0.32],[0.88,0.25],[0.75,0.12],
 [0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]
 ]

然后定義一個(gè)SVG的繪制區(qū)域:

//定義一個(gè)svg的繪制區(qū)域。
 var width = 600; //svg繪制區(qū)域的寬度
 var height = 500; //svg繪制區(qū)域的高度

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

數(shù)組中的每一項(xiàng)都是一個(gè)數(shù)組，子數(shù)組的第一項(xiàng)表示x值，第二項(xiàng)表示y值。實(shí)際應(yīng)用中x軸和y軸可能對(duì)應(yīng)著不同的意義，單位也可能不同。比如人口-GDP、煙齡-肺癌率等。這些數(shù)據(jù)都不可能直接用像素作單位來(lái)繪制，因?yàn)轭?lèi)似(0.5,0.5)、(0.7,0.8)這樣的位置，即便繪制了也會(huì)看到圓都擠到一塊，分不清彼此。因此要先使用比例尺將它們放大。

//定義比例尺
 //x軸寬度
 var xAxisWidth = 300;
 //y軸寬度
 var yAxisWidth = 300;
 //x軸比例尺
 var xScale = d3.scale.linear()  //創(chuàng)建一個(gè)線性比例尺
  .domain([0,1.2*d3.max(center,function(d){ //設(shè)定定義域
  return d[0]
  })])
  .range([0,xAxisWidth])  //設(shè)定值域
 //y軸比例尺
 var yScale = d3.scale.linear()  //創(chuàng)建一個(gè)線性比例尺
  .domain([0,1.2*d3.max(center,function(d){ //設(shè)定定義域
  return d[1]
  })])
  .range([0,yAxisWidth])  //設(shè)定值域

xAxisWidth和yAxisWidth可以根據(jù)需求設(shè)定。要注意，兩個(gè)比例尺都是線性比例尺，在設(shè)定定義域domain時(shí)，使用了d3.max()，這是一個(gè)求數(shù)組最大值的函數(shù)。詳情見(jiàn)http://www.dhdzp.com/article/160968.htm對(duì)于x軸的比例尺來(lái)說(shuō)，這里的意思是，相對(duì)于center數(shù)組的每一項(xiàng)，返回其子數(shù)組的第一項(xiàng)(d[0])組成一個(gè)新的數(shù)組，然后再求最大值。最大值前面乘了一個(gè)1.2,這是為了使得散點(diǎn)圖不會(huì)有某一點(diǎn)存在于坐標(biāo)軸的邊緣上。

下面在SVG中繪制圖形，先繪制圓:

//在svg中繪制圖形，先繪制圓
 //外邊框
 var padding = {top:30,right:30,bottom:100,left:100};
 //繪制圓
 var circle = svg.selectAll("circle")
  .data(center)  //綁定數(shù)據(jù)
  .enter()  //獲取enter部分
  .append("circle") //
  
  .attr("fill","goldEnrod") //設(shè)置顏色
  .attr("cx",function(d){ //設(shè)置圓心的x坐標(biāo)
  return padding.left + xScale(d[0])
  })
  .attr("cy",function(d){ //設(shè)置圓心的y坐標(biāo)
  return height-padding.bottom-yScale(d[1])
  })
  .attr("r",5)  //設(shè)置圓的半徑

注意上面代碼的粗體字部分，分別使用x軸和y軸的比例尺放大數(shù)據(jù)。

最后定義坐標(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)軸的方向

 
 yScale.range([yAxisWidth,0])  //重新設(shè)置y軸比例尺的值域，與原來(lái)的相反

 //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ù)
 
 //設(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)

看一下效果圖:

完整代碼:

import React, { Component } from 'react';
import * as d3 from 'd3'
class ScatterChart extends Component {
 constructor(props) {
 super(props);
 this.state = {}
 }
 componentDidMount(){
 this.oneMethod()
 }
 oneMethod(){
 //圓心數(shù)據(jù)
 var center = [
 [0.5,0.5],[0.7,0.8],[0.4,0.9],
 [0.11,0.32],[0.88,0.25],[0.75,0.12],
 [0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]
 ]
 //定義一個(gè)svg的繪制區(qū)域。
 var width = 600; //svg繪制區(qū)域的寬度
 var height = 500; //svg繪制區(qū)域的高度
 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軸比例尺
 var xScale = d3.scale.linear()  //創(chuàng)建一個(gè)線性比例尺
  .domain([0,1.2*d3.max(center,function(d){ //設(shè)定定義域
  return d[0]
  })])
  .range([0,xAxisWidth])  //設(shè)定值域
 //y軸比例尺
 var yScale = d3.scale.linear()  //創(chuàng)建一個(gè)線性比例尺
  .domain([0,1.2*d3.max(center,function(d){ //設(shè)定定義域
  return d[1]
  })])
  .range([0,yAxisWidth])  //設(shè)定值域
 //在svg中繪制圖形，先繪制圓
 //外邊框
 var padding = {top:30,right:30,bottom:100,left:100};
 //繪制圓
 var circle = svg.selectAll("circle")
  .data(center)  //綁定數(shù)據(jù)
  .enter()  //獲取enter部分
  .append("circle") //
  .attr("fill","goldEnrod") //設(shè)置顏色
  .attr("cx",function(d){ //設(shè)置圓心的x坐標(biāo)
  return padding.left + xScale(d[0])
  })
  .attr("cy",function(d){ //設(shè)置圓心的y坐標(biāo)
  return height-padding.bottom-yScale(d[1])
  })
  .attr("r",5)  //設(shè)置圓的半徑
 //定義坐標(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)軸的方向
 yScale.range([yAxisWidth,0])  //重新設(shè)置y軸比例尺的值域，與原來(lái)的相反
 //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ù)
 //設(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 ScatterChart;

總結(jié)

以上所述是小編給大家介紹的D3.js(v3)+react 實(shí)現(xiàn)帶坐標(biāo)與比例尺的散點(diǎn)圖 (V3版本) ,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: