D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

2024-10-11 16:23:42

上篇文章给大家介绍了圆柱图：https://www.jb51.net/article/160958.htm

散点图(Scatter Chart),通常是一横一竖两个坐标轴，数据是一组二维坐标，分别对应两个坐标轴，与坐标轴对应的地方打上点。由此可以猜到，需要的元素包括circle(圆)和axis(坐标轴)。需要进行可视化的数据有:

//圆心数据
  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]
  ]

然后定义一个SVG的绘制区域:

//定义一个svg的绘制区域。
 var width = 600; //svg绘制区域的宽度
 var height = 500; //svg绘制区域的高度

 var svg = d3.select("#body")   //选择id为body的div
   .append("svg")   //在<body>中添加<avg>
   .attr("width",width)  //设定<svg>的宽度属性
   .attr("height",height)  //设定<svg>的高度属性

数组中的每一项都是一个数组，子数组的第一项表示x值，第二项表示y值。实际应用中x轴和y轴可能对应着不同的意义，单位也可能不同。比如人口-GDP、烟龄-肺癌率等。这些数据都不可能直接用像素作单位来绘制，因为类似(0.5,0.5)、(0.7,0.8)这样的位置，即便绘制了也会看到圆都挤到一块，分不清彼此。因此要先使用比例尺将它们放大。

//定义比例尺
 //x轴宽度
 var xAxisWidth = 300;
 //y轴宽度
 var yAxisWidth = 300;
 //x轴比例尺
 var xScale = d3.scale.linear()    //创建一个线性比例尺
   .domain([0,1.2*d3.max(center,function(d){ //设定定义域
   return d[0]
   })])
   .range([0,xAxisWidth])   //设定值域
 //y轴比例尺
 var yScale = d3.scale.linear()    //创建一个线性比例尺
   .domain([0,1.2*d3.max(center,function(d){ //设定定义域
   return d[1]
   })])
   .range([0,yAxisWidth])   //设定值域

xAxisWidth和yAxisWidth可以根据需求设定。要注意，两个比例尺都是线性比例尺，在设定定义域domain时，使用了d3.max()，这是一个求数组最大值的函数。详情见https://www.cnblogs.com/littleSpill/p/10793275.html对于x轴的比例尺来说，这里的意思是，相对于center数组的每一项，返回其子数组的第一项(d[0])组成一个新的数组，然后再求最大值。最大值前面乘了一个1.2,这是为了使得散点图不会有某一点存在于坐标轴的边缘上。

下面在SVG中绘制图形，先绘制圆:

//在svg中绘制图形，先绘制圆
 //外边框
 var padding = {top:30,right:30,bottom:100,left:100};
 //绘制圆
 var circle = svg.selectAll("circle")
   .data(center)   //绑定数据
   .enter()   //获取enter部分
   .append("circle")  //

   .attr("fill","goldEnrod") //设置颜色
   .attr("cx",function(d){  //设置圆心的x坐标
    return padding.left + xScale(d[0])
   })
   .attr("cy",function(d){  //设置圆心的y坐标
    return height-padding.bottom-yScale(d[1])
   })
   .attr("r",5)   //设置圆的半径

注意上面代码的粗体字部分，分别使用x轴和y轴的比例尺放大数据。

最后定义坐标轴:

//定义坐标轴
 //x轴
 var xAxis = d3.svg.axis()   //创建一个默认的新坐标轴
   .scale(xScale)   //设定坐标轴的比例尺
   .orient("bottom")  //设定坐标轴的方向

 yScale.range([yAxisWidth,0])   //重新设置y轴比例尺的值域，与原来的相反

 //y轴
 var yAxis = d3.svg.axis()   //创建一个默认的新坐标轴
   .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)    //将自身作为参数传递给xAxis函数

 //设置y轴和平移
 svg.append("g")     //在svg中添加一个包含坐标轴各元素的g元素
  .attr("class","axis")   //定义class名
  .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth+")")) //将y轴进行平移
  .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(){
 //圆心数据
 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]
 ]
 //定义一个svg的绘制区域。
 var width = 600; //svg绘制区域的宽度
 var height = 500; //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轴比例尺
 var xScale = d3.scale.linear()    //创建一个线性比例尺
   .domain([0,1.2*d3.max(center,function(d){ //设定定义域
   return d[0]
   })])
   .range([0,xAxisWidth])   //设定值域
 //y轴比例尺
 var yScale = d3.scale.linear()    //创建一个线性比例尺
   .domain([0,1.2*d3.max(center,function(d){ //设定定义域
   return d[1]
   })])
   .range([0,yAxisWidth])   //设定值域
 //在svg中绘制图形，先绘制圆
 //外边框
 var padding = {top:30,right:30,bottom:100,left:100};
 //绘制圆
 var circle = svg.selectAll("circle")
   .data(center)   //绑定数据
   .enter()   //获取enter部分
   .append("circle")  //
   .attr("fill","goldEnrod") //设置颜色
   .attr("cx",function(d){  //设置圆心的x坐标
    return padding.left + xScale(d[0])
   })
   .attr("cy",function(d){  //设置圆心的y坐标
    return height-padding.bottom-yScale(d[1])
   })
   .attr("r",5)   //设置圆的半径
 //定义坐标轴
 //x轴
 var xAxis = d3.svg.axis()   //创建一个默认的新坐标轴
   .scale(xScale)   //设定坐标轴的比例尺
   .orient("bottom")  //设定坐标轴的方向
 yScale.range([yAxisWidth,0])   //重新设置y轴比例尺的值域，与原来的相反
 //y轴
 var yAxis = d3.svg.axis()   //创建一个默认的新坐标轴
   .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)    //将自身作为参数传递给xAxis函数
 //设置y轴和平移
 svg.append("g")     //在svg中添加一个包含坐标轴各元素的g元素
  .attr("class","axis")   //定义class名
  .attr("transform","translate("+padding.left+","+(height-padding.bottom-yAxisWidth+")")) //将y轴进行平移
  .call(yAxis)    //将自身作为参数传递给yAxis函数
 }
 render() {
 return (
  <div id="body" >
  </div>
 );
 }
}
export default ScatterChart;

总结

以上所述是小编给大家介绍的D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本) ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

D3.js实现散点图和气泡图的方法详解

前言小编之前已经跟大家分享过了<D3.js实现柱状图的方法详解>和<D3.js实现折线图的方法详解>这两篇文章,已经介绍过柱状图和折线图了.下面就来说说和这两种非常相似的图表--散点图和气泡图.有需要的朋友们可以参考学习. 散点图和气泡图的实现还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

现在用D3.js + react做一个带坐标轴和比例尺的柱形图.我已经尽力把代码全部注释上了,最后我也会把完整柱形图代码奉上.如果还有疑惑的,可以去翻看一下我之前介绍的方法,以下方法都有介绍到. 还有数据都是自己定义的假数据,大家参考一下制作方法即可. 首先定义柱形图的数据.绘图区域的宽高.和上下左右的边距: var width = 600; //SVG绘制区域的宽度 var height = 500; //SVG绘制区域的高度 //定义数据 var dataList = [50,43,120,
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

上篇文章给大家介绍了圆柱图:https://www.jb51.net/article/160958.htm 散点图(Scatter Chart),通常是一横一竖两个坐标轴,数据是一组二维坐标,分别对应两个坐标轴,与坐标轴对应的地方打上点.由此可以猜到,需要的元素包括circle(圆)和axis(坐标轴).需要进行可视化的数据有: //圆心数据 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
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)

数组的处理 : 数组时一种常用的数据结构,通常是由相同数据类型的项组成集合,拥有数组名,可以凭借数组名和下标来访问数组项.虽然JavaScript允许一个数组中存在不同的数据类型,但实际很少这样使用.需要被可视化的数据常以数组的形式存在,虽然JavaScript中提供了不少操作数组的方法,但JavaScript不是为了数据可视化而存在的.因此,D3数据可视化的需求封装了不少数组处理函数. 一排序 : 排序的方法: d3.ascending(a,b); //递增函数.如果a小于b,则返回-1:如
Three.js+React实现带火焰效果的艾尔登法环

目录背景效果实现 Fire.js 资源引入场景初始化添加Logo主体页面缩放适配镜头补间动画页面重绘动画总结背景 <艾尔登法环>是最近比较火的一款游戏,观察可以发现它的 Logo 是由几个圆弧和线段构成.本文使用 React + Three.js 技术栈,实现具有火焰效果艾尔登法环 Logo,本文中涉及到的知识点包括:Fire.js 基本使用方法及 Three.js 的其他基础知识. 效果实现效果如banner 图所示,页面主体由 Logo 图形构成,Logo 具有由远及
基于d3.js实现实时刷新的折线图

先来看看效果图下面直接上源代码,html文件 <html> <head> <meta charset="utf-8"> <title>实时刷新折线图</title> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-seri
D3.js实现雷达图的方法详解

前言再简单介绍下D3.js,D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 本文依然是先把简单的画图框架搭起来,添加SVG画布.这里和饼图有点类似,为了方便后面的绘制,我们把组合这些元素的g元素移动到画布的中心: <!DOC
D3.js实现饼状图的方法详解

前言小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表.这两种图表都是有坐标轴的,现在来说一种没有坐标轴的图表--饼图. 饼状图实现还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布.但是这里需要注意的是,为了方便后面画饼图上的弧形,我们把组合这些元素的g元素移动到画布的中心: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
D3.js实现折线图的方法详解

前言 D3.js是一个帮助开发者操纵基于数据的文档的JavaScript类库,在<D3.js实现柱状图的方法详解>中已经给大家介绍过如何用D3.js来实现一个简单的柱状图了,今天我们来学习用D3.js来实现折线图,感兴趣的朋友们下面来一起看看吧. 折线图由坐标轴.线条和点组成.和实现柱状图一样,我们还是先把大概的画图框架搭起来,代码如下(别忘了添加D3.js): <!DOCTYPE html> <html lang="en"> <head>
D3.js实现柱状图的方法详解

D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 如何用D3.js实现柱状图? 柱状图里面有坐标轴和柱子.然而我们还需要SVG画布来画这些东西.先把大概的画图框架搭起来,代码如下(请注意此时我在body标签里添加
D3.js封装文本实现自动换行和旋转平移等功能

我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMultiText(container, str, posX, posY, width, fontsize, fontfamily){ if( arguments.length < 6){ fontsize = 14; } if( arguments.length < 7){ fontfamily = &q

D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)

相关推荐

随机推荐