Question

目前我有三个数组形式的数据集，我希望将其中一个数据集保留为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]

我想要实现类似的散点图 This

Answer 1

不确定是否要将x2用作独立于x轴的第三个可视变量，或者将x1和x2连接在一起成为一个系列，但关键是d3.zip函数，无论是哪种情况 - {{ 3}}

使用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的分组散点图

1 个答案: