1 //圆心数据 2 var center = [ 3 [0.5,0.5],[0.7,0.8],[0.4,0.9], 4 [0.11,0.32],[0.88,0.25],[0.75,0.12], 5 [0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7] 6 ]
1 //定义一个svg的绘制区域。 2 var width = 600; //svg绘制区域的宽度 3 var height = 500; //svg绘制区域的高度 4 5 var svg = d3.select("#body") //选择id为body的div 6 .append("svg") //在<body>中添加<avg> 7 .attr("width",width) //设定<svg>的宽度属性 8 .attr("height",height) //设定<svg>的高度属性
1 //定义比例尺 2 //x轴宽度 3 var xaxiswidth = 300; 4 //y轴宽度 5 var yaxiswidth = 300; 6 //x轴比例尺 7 var xscale = d3.scale.linear() //创建一个线性比例尺 8 .domain([0,1.2*d3.max(center,function(d){ //设定定义域 9 return d[0] 10 })]) 11 .range([0,xaxiswidth]) //设定值域 12 //y轴比例尺 13 var yscale = d3.scale.linear() //创建一个线性比例尺 14 .domain([0,1.2*d3.max(center,function(d){ //设定定义域 15 return d[1] 16 })]) 17 .range([0,yaxiswidth]) //设定值域
1 //在svg中绘制图形,先绘制圆 2 //外边框 3 var padding = {top:30,right:30,bottom:100,left:100}; 4 //绘制圆 5 var circle = svg.selectall("circle") 6 .data(center) //绑定数据 7 .enter() //获取enter部分 8 .append("circle") // 9 10 .attr("fill","goldenrod") //设置颜色 11 .attr("cx",function(d){ //设置圆心的x坐标 12 return padding.left + xscale(d[0]) 13 }) 14 .attr("cy",function(d){ //设置圆心的y坐标 15 return height-padding.bottom-yscale(d[1]) 16 }) 17 .attr("r",5) //设置圆的半径
1 //定义坐标轴 2 //x轴 3 var xaxis = d3.svg.axis() //创建一个默认的新坐标轴 4 .scale(xscale) //设定坐标轴的比例尺 5 .orient("bottom") //设定坐标轴的方向 6 7 8 yscale.range([yaxiswidth,0]) //重新设置y轴比例尺的值域,与原来的相反 9 10 //y轴 11 var yaxis = d3.svg.axis() //创建一个默认的新坐标轴 12 .scale(yscale) //设定坐标轴的比例尺 13 .orient("left") //设定坐标轴的方向 14 15 //添加x轴和平移 16 svg.append("g") //在svg中添加一个包含坐标轴各元素的g元素 17 .attr("class","axis") //定义class名 18 .attr("transform","translate("+padding.left+","+(height-padding.bottom)+")") //将x轴进行平移 19 .call(xaxis) //将自身作为参数传递给xaxis函数 20 21 //设置y轴和平移 22 svg.append("g") //在svg中添加一个包含坐标轴各元素的g元素 23 .attr("class","axis") //定义class名 24 .attr("transform","translate("+padding.left+","+(height-padding.bottom-yaxiswidth+")")) //将y轴进行平移 25 .call(yaxis)
1 import react, { component } from 'react'; 2 import * as d3 from 'd3' 3 class scatterchart extends component { 4 constructor(props) { 5 super(props); 6 this.state = {} 7 } 8 9 componentdidmount(){ 10 this.onemethod() 11 } 12 13 onemethod(){ 14 15 //圆心数据 16 var center = [ 17 [0.5,0.5],[0.7,0.8],[0.4,0.9], 18 [0.11,0.32],[0.88,0.25],[0.75,0.12], 19 [0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7] 20 ] 21 22 //定义一个svg的绘制区域。 23 var width = 600; //svg绘制区域的宽度 24 var height = 500; //svg绘制区域的高度 25 26 var svg = d3.select("#body") //选择id为body的div 27 .append("svg") //在<body>中添加<avg> 28 .attr("width",width) //设定<svg>的宽度属性 29 .attr("height",height) //设定<svg>的高度属性 30 31 //定义比例尺 32 //x轴宽度 33 var xaxiswidth = 300; 34 //y轴宽度 35 var yaxiswidth = 300; 36 //x轴比例尺 37 var xscale = d3.scale.linear() //创建一个线性比例尺 38 .domain([0,1.2*d3.max(center,function(d){ //设定定义域 39 return d[0] 40 })]) 41 .range([0,xaxiswidth]) //设定值域 42 //y轴比例尺 43 var yscale = d3.scale.linear() //创建一个线性比例尺 44 .domain([0,1.2*d3.max(center,function(d){ //设定定义域 45 return d[1] 46 })]) 47 .range([0,yaxiswidth]) //设定值域 48 49 //在svg中绘制图形,先绘制圆 50 //外边框 51 var padding = {top:30,right:30,bottom:100,left:100}; 52 //绘制圆 53 var circle = svg.selectall("circle") 54 .data(center) //绑定数据 55 .enter() //获取enter部分 56 .append("circle") // 57 58 .attr("fill","goldenrod") //设置颜色 59 .attr("cx",function(d){ //设置圆心的x坐标 60 return padding.left + xscale(d[0]) 61 }) 62 .attr("cy",function(d){ //设置圆心的y坐标 63 return height-padding.bottom-yscale(d[1]) 64 }) 65 .attr("r",5) //设置圆的半径 66 67 //定义坐标轴 68 //x轴 69 var xaxis = d3.svg.axis() //创建一个默认的新坐标轴 70 .scale(xscale) //设定坐标轴的比例尺 71 .orient("bottom") //设定坐标轴的方向 72 73 74 yscale.range([yaxiswidth,0]) //重新设置y轴比例尺的值域,与原来的相反 75 76 //y轴 77 var yaxis = d3.svg.axis() //创建一个默认的新坐标轴 78 .scale(yscale) //设定坐标轴的比例尺 79 .orient("left") //设定坐标轴的方向 80 81 //添加x轴和平移 82 svg.append("g") //在svg中添加一个包含坐标轴各元素的g元素 83 .attr("class","axis") //定义class名 84 .attr("transform","translate("+padding.left+","+(height-padding.bottom)+")") //将x轴进行平移 85 .call(xaxis) //将自身作为参数传递给xaxis函数 86 87 //设置y轴和平移 88 svg.append("g") //在svg中添加一个包含坐标轴各元素的g元素 89 .attr("class","axis") //定义class名 90 .attr("transform","translate("+padding.left+","+(height-padding.bottom-yaxiswidth+")")) //将y轴进行平移 91 .call(yaxis) //将自身作为参数传递给yaxis函数 92 93 } 94 95 render() { 96 return ( 97 <div id="body" > 98 99 </div> 100 ); 101 } 102 } 103 104 export default scatterchart;
如对本文有疑问, 点击进行留言回复!!
androidx+viewpage+tablayout+json开发(加载图片和视频)
网友评论