具有多个数据集的分组散点图D3
Grouped scatter plot with multiple datasets D3
目前我有3个数组形式的数据集,我希望保留其中一个数据集作为Y轴,其余数据集绘制在散点图上并作为X轴范围。
到目前为止,我只能在Y轴和X轴上绘制一个数据集。
g.selectAll("scatter-dots")
.data(y1data)
.enter().append("svg:circle")
.attr("cy", function (d) { return y(d); } )
.attr("cx", function (d,i) { return x(xdata[i]); } )
要绘制的数据集是x1data x2data作为X轴,以及X轴范围和域将如何改变
这是我目前的X轴
var x = d3.scale.linear()
.domain([11, d3.max(x1data)]) //i am only taking the max of one dataset.
.range([ 0, width ]);
这三个数据集是
x1data= [11, 22, 10, 55, 44, 23, 12, 56, 100, 98, 75, 20]
x2data= [8, 41, 34, 67, 34, 13, 67, 45, 66, 3, 34, 75]
y1data = [2000, 2001, 2004, 2005, 2006,2007]
我想要实现类似于此
不太确定是要将x2用作独立于x轴的第三个视觉变量,还是将x1和x2连接到一个系列中,但无论哪种情况,关键都是d3.zip函数-https://github.com/mbostock/d3/wiki/Arrays#d3_zip
要使用x2作为第三个变量,即圆半径,请使用d3.zip将您的三个阵列转换为三个元素阵列的阵列:
var data = d3.zip ([y1data, x1data, x2data]);
数据现在将是[[2000,11,8],[2001,22,41]。。。等等…]。
然后在你的散点图选择上使用它
g.selectAll("scatter-dots")
.data(data)
.enter().append("svg:circle")
.attr("cy", function (d) { return y(d[0]); } ) // d[0] is the value from y1data for this datum
.attr("cx", function (d,i) { return x(d[1]); } ) // d[1] is the value from x1data for this datum
.attr("r", function (d,i) { return rscale(d[2]); } ) // d[2] is the value from x2data for this datum.
// ^^^rscale will need to be a scale you construct that controls the mapping of the x2 values
如果您想将x1和x2绘制为不同的系列,但都与x轴相连,请使用d3.zip:
var data1 = d3.zip ([y1data, x1data, y1data.map (function(a) { return 1; }); ]);
var data2 = d3.zip ([y1data, x2data, y1data.map (function(a) { return 2; }); ]);
var data = data1.concat(data2);
数据现在将是[[2000,11,1],[2001,22,1]。。。等[2000,8,2],[2001,41,2]。。。等等…]。
g.selectAll("scatter-dots")
.data(data)
.enter().append("svg:circle")
.attr("cy", function (d) { return y(d[0]); } ) // d[0] is the value from y1data for this datum
.attr("cx", function (d,i) { return x(d[1]); } ) // d[1] is the value from x1data or x2data for this datum
.attr("r", "5") // fixed radius this time
.attr("fill", function (d,i) { return colscale(d[2]); } ) // d[2] is either 1 or 2 for this datum
// ^^^colscale will need to be a scale you construct that controls the mapping of the values 1 or 2 to a colour
相关文章:
- 将工具提示添加到d3散点图中
- 具有多个数据集的分组散点图D3
- d3.js散点图中的刻度标签在Firefox 13.0.1中被截断
- 在D3散点图圆上添加标签
- d3.js可以使用来自同一来源的数据在同一张图上绘制两个散点图吗
- 使用d3制作交互式散点图
- 如何使用d3在散点图上逐个绘制/添加节点
- 在散点图 D3.js 中动态命名轴
- TSV 矩阵作为 D3 中的散点图
- D3.js具有大(>500,000)点的散点图?聚类
- D3:为多个值创建散点图
- 点的颜色在 D3.js散点图上的 10 个数据集后重复
- D3.js 中的简单散点图示例
- 将数据复制到 JavaScript D3 中的数组.js然后绘制散点图
- D3 x 轴对于散点图内容来说太短
- 利用数据生成散点图采用d3转换法
- 散点图矩阵的工具提示-使用d3
- 使用d3.js的javascript极坐标散点图
- d3.js散点图don't在转换时重新绘制
- 如何在散点图D3.js中更改图例的位置