您好,登錄后才能下訂單哦!
上篇文章給大家介紹了圓柱圖:https://www.jb51.net/article/160958.htm
散點(diǎn)圖(Scatter Chart),通常是一橫一豎兩個(gè)坐標(biāo)軸,數(shù)據(jù)是一組二維坐標(biāo),分別對應(yīng)兩個(gè)坐標(biāo)軸,與坐標(biāo)軸對應(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軸可能對應(yīng)著不同的意義,單位也可能不同。比如人口-GDP、煙齡-肺癌率等。這些數(shù)據(jù)都不可能直接用像素作單位來繪制,因?yàn)轭愃?0.5,0.5)、(0.7,0.8)這樣的位置,即便繪制了也會看到圓都擠到一塊,分不清彼此。因此要先使用比例尺將它們放大。
//定義比例尺 //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ù)。詳情見https://www.jb51.net/article/160968.htm對于x軸的比例尺來說,這里的意思是,相對于center數(shù)組的每一項(xiàng),返回其子數(shù)組的第一項(xiàng)(d[0])組成一個(gè)新的數(shù)組,然后再求最大值。最大值前面乘了一個(gè)1.2,這是為了使得散點(diǎn)圖不會有某一點(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軸比例尺的值域,與原來的相反 //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軸比例尺的值域,與原來的相反 //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版本) ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。