D3.js(V3)反应实现坐标和比例散点图(V3版)

上一篇文章向您介绍了圆柱形图片：https://www.jb51.net/article/160958.htm

散点图通常是一个水平坐标轴和一个垂直坐标轴，数据是一组二维坐标，分别对应两个坐标轴，坐标轴对应的地方用点标注。可以猜测，需要的元素包括圆和轴。有：个数据需要可视化

//数据中心varcenter=[[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]

//定义svg的绘图区域。var宽度=600；//svg绘图区域的宽度var高度=500；//SVG绘图区域的高度var SVG=D3 . select(' # body ')//select div . append(' SVG ')，其id为body//add avg。attr('width '，width) //设置width属性。attr('height '，height) //设置SVG的高度属性在实际应用中，X轴和Y轴可能对应不同的含义，单位可能不同。比如人口-GDP、吸烟年龄-肺癌率等。这些数据不能直接用像素来画，因为即使画出(0.5，0.5)、(0.7，0.8)这样的位置，也可以看到圆圈挤在一起，无法区分。因此，您应该首先用比例尺放大它们。

//定义比例尺//x轴宽度var xAxisWidth=300//y轴宽度var yAxisWidth=300//x-scale var xScale=D3 . scale . linear()//创建一个线性刻度。域([0，1.2 * d3.max(中心，函数(d){//设置域返回d [0]}))。范围([0，XAxisWidth]) //设置值范围//y轴刻度var yScale=d3.scale.linear() //创建线性刻度。域([0，1.2 * d3.max(中心，函数(d){//设置域返回d [1]}))。范围(。需要注意的是，两个尺度都是线性尺度，设置定义域时使用d3.max()，定义域是求数组最大值的函数。详见https://www.jb51.net/article/160968.htm.对于X轴的刻度，是指相对于中心数组中的每一项，返回其子数组的第一项(d[0])组成一个新数组，然后得到最大值。最大值乘以1.2，这是为了使散点图在坐标轴的边缘没有某个点。

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

//在svg中绘制图形，先画一个圆。//外边框varpadding={top:30，右侧：30，底部3360100，左侧：100 }；//画一个圆var circle=SVG。全选('圆形')。数据(中心)//绑定数据。enter() //获取enter部分。追加('圆圈')//。attr('fill '，golden ord ')//设置颜色。attr('cx '，函数(d){ //设置圆心的x坐标返回填充。leftxscale (d [0])}。attr ('cy '，函数(d){ //设置圆心的y坐标返回高度-填充。底部y刻度(d [1])}。attr ('r '，5)//设置圆的半径。注意上面代码的粗体部分，分别用x轴和y轴刻度放大数据。

最后，定义坐标轴：

//定义坐标轴//x轴var xAxis=d3.svg.axis() //创建新的默认坐标轴。比例(xScale) //设置比例。定向('底部')//设置坐标轴的方向yScale.range([yAxisWidth，0]) //重置y轴刻度的取值范围，与原//y轴相反var yAxis=d3.svg.axis() //新建默认坐标轴。比例(yScale) //设置坐标轴的比例。定向('左')//设置坐标轴的方向//添加x轴并平移svg.append('g') //添加g元素。attr('class '，' axis') //定义类名。attr ('transform '，' translate ('padding。left '，(height-padding.bottom) ')') //翻译xAxis。调用(xAxis) //将自身作为参数传递给xAxis函数//设置y轴并翻译svg.append('g') //添加一个g元素。包含svg中坐标轴所有元素的attr('class ')。Axis') //定义类名。attr ('transform '，' translate ('padding。左'，'(高度-填充。bottom-yaxis width ')')//平移y轴。调用(yAxis)查看渲染：

完整代码：

从“反应”导入反应{组件}；导入* as d3从' d3 '类散点图扩展Component { constructor(道具){ super(道具)；这个。state={ } } component idmount(){ this。one method()} one method(){//center data varcenter=[[0.5，0.5]，[0.7，0.8]，[0.4，0.9]，[0.11，0.32]，[0.75，0.12]，[0.5，0.1]，[0.2，0.3]，[0.4，0.1]，[0.6，0.7]//定义svg的绘图区域。var宽度=600；//svg绘图区域的宽度var高度=500；//SVG绘图区域的高度var SVG=D3 . select(' # body ')//select div . append(' SVG ')，其id为body//add avg。attr('width '，width) //设置width属性。attr('height '，height) //设置SVG的height属性//y轴宽度var yAxisWidth=300//x-scale var xScale=D3 . scale . linear()//创建一个线性刻度。域([0，1.2 * d3.max(中心，函数(d){//设置域返回d [0]}))。范围([0，XAxisWidth]) //设置值范围//y轴刻度var yScale=d3.scale.linear() //创建线性刻度。域([0，1.2 * d3.max(中心，函数(d){//设置域返回d [1]}))。范围(。yaxiwsidth])//设置取值范围//在svg中画一个图，先画一个圆//外边框varpadding={top:30，right:30，bottom3360100，left :100 }；//画一个圆var circle=SVG。全选('圆形')。数据(中心)//绑定数据。enter() //获取enter部分。追加('圆圈')//。attr('fill '，golden ord ')//设置颜色。attr('cx '，函数(d){ //设置圆心的x坐标返回填充。leftxscale (d [0])}。attr ('cy '，函数(d){ //设置圆心的y坐标返回高度-填充。底部y刻度(d [1])}。attr ('r '，5) //设置圆的半径//定义坐标轴//x轴var xAxis=d3.svg.axis() //新建默认坐标轴。比例尺(xScale) //设置坐标轴的比例尺。定向('底部')//设置坐标轴的方向yScale.range([yAxisWidth，0]) //重置y轴刻度的取值范围，与原来相反//y轴var yAxis=d3.svg.axis() //新建默认坐标轴。比例(yScale) //设置坐标轴的比例。定向('左')//设置坐标轴的方向//添加x轴并平移svg.append('g') //添加g元素。attr('class '，' axis') //定义类名。attr ('transform '，' translate ('padding。left '，(height-padding.bottom) ')') //翻译xAxis。调用(xAxis) //将自身作为参数传递给xAxis函数//设置y轴并翻译svg.append('g') //添加一个g元素。包含svg中坐标轴所有元素的attr('class ')。Axis') //定义类名。attr ('transform '，' translate ('padding。左'，'(高度-填充。bottom-yAxis width ')')//平移y轴。调用(yAxis) //将自身作为参数传递给yAxis函数} render } }导出默认散点图；摘要

以上是边肖介绍的D3.js(v3) react实现的带坐标和比例尺的散点图(V3版)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！