Question

我在TSV文件中有1000（行）x100（列）矩阵，其中每个单元格都是整数。我想做一个数据的散点图，X轴是行（1000），列是Y轴。每个值都将表示为一个圆，如果值更大，该圆将更大。

首先，我尝试使用D3.js加载数据：

 d3.tsv(Data_url, function(matrix_data) {
  console.log((matrix_data));
}

我只是获得了1000个对象的一维数组，我不知道为什么。此外，我想如前所述绘制这些数据，因此我需要行和列号，因为它们确实是数据。我的意思是，de 0到100列是百分比，0到1000行是长度所以我需要这样的东西：

    .attr("cx", function (d) { return x(row_number); })
    .attr("cy", function (d) { return y(column_number); })
    .attr("r", function (d) { return r(d); });

但我找不到东西来获取row_number和column_number。我用另一种方法使用'Papaparse'来读取数据并且工作正常。即使以这种方式使用JSON：

 matrix = JSON.parse(JSON.stringify(matrix_data));

我只是想了解它应该如何在D3中完成。在此先感谢=）

Answer 1

给出类似矩阵的数据：

18  12  14  15  17  14  15  16  16  15  15  14
11  13  15  16  14  14  15  16  16  16  10  18
...

这是一个快速绘制方法：

// grad the data as text
d3.text("data.tsv", function(text) {

  // parse the data, this will produce an array of arrays
  // where the outer array is each row, the inner each column
  var data = d3.tsv.parseRows(text); 

  // set your domains to be the lengths of your data with some padding
  x.domain([-0.5, data.length + 0.5]);
  y.domain([-0.5, data[0].length + 0.5]);

  // we are going to use a nested selection
  // the outer represents a row and is a svg g
  var rows = svg.selectAll(".row")
    .data(data)
    .enter()
    .append('g')
    .attr('class', 'row');

  // the inner selection is a col and contains the points
  // which are circles
  rows.selectAll('.point')
    .data(function(d){
      return d; //<-- return each point
    })
    .enter()
    .append('circle')
    .attr('class', 'point')
    .attr('cx', function(d,i,j){
      return x(j); //<-- the 'j' is the index of the row
    })
    .attr('cy', function(d,i,j){
      return y(i); //<-- the 'i' is the index of the column
    })
    .attr('r', function(d,i,j){
      return d; //<-- the d is the value in the matrix
    })
    .style('fill', 'steelblue');

完整的工作示例是here。

TSV矩阵作为D3中的散点图

1 个答案: