javascript - 在plotly中创建散点图，无需为数据声明多个变量

Question

以下记录是我想使用plotly库的散点图绘制的数据集的一小部分样本。

id  value   condition
1   0.00167736464652281 CM
1   0.00409236292494868 ECM
1   0.00402114732563961 SAX
2   0.0136247916329259  SAX
2   0.0151036287262202  ECM
2   0.0115020440436599  CM
3   0.0115571286240125  CM
3   0.0155058764871028  ECM
3   0.0162593141280405  SAX
4   0.0162953858863326  SAX
4   0.0172050279098291  ECM
4   0.0140566233578565  CM
5   0.0141510897863713  CM
5   0.0177908403313223  ECM
5   0.0181831372346949  SAX

根据标准方式(使用此 example )我应该将值拆分为 3 个变量 - 每个条件一个变量(例如 var CM、var ECM、var SAX)，如下所示:

var CM = {
  x: [1, 2, 3, 4, 5],
  y: [0.00167736464652281, 0.0115020440436599, 0.0115571286240125, 0.0140566233578565, 0.0141510897863713],
  mode: 'markers',
  type: 'scatter'
};

有没有更智能的方法来使用样本数据的结构来创建散点图？

Answer 1

假设您的数据位于对象数组中，您可以使用以下方法。

• 迭代一组条件

  var conditions = new Set(data.map(a => a.condition));
  conditions.forEach(function(condition) {
      var newArray = data.filter(function(el) {
          return el.condition == condition;
      });
  })
  

• 将id映射到x，将value映射到y

  traces.push({
      x: newArray.map(a => a.id),
      y: newArray.map(a => a.value),
      name: condition,
      mode: 'markers',
      type: 'scatter'
  })
  

data = [];
data.push({
  'id': 1,
  'value': 0.00167736464652281,
  'condition': 'CM'
});
data.push({
  'id': 1,
  'value': 0.00409236292494868,
  'condition': 'ECM'
});
data.push({
  'id': 1,
  'value': 0.00402114732563961,
  'condition': 'SAX'
});
data.push({
  'id': 2,
  'value': 0.0136247916329259,
  'condition': 'SAX'
});
data.push({
  'id': 2,
  'value': 0.0151036287262202,
  'condition': 'ECM'
});
data.push({
  'id': 2,
  'value': 0.0115020440436599,
  'condition': 'CM'
});
data.push({
  'id': 3,
  'value': 0.0115571286240125,
  'condition': 'CM'
});
data.push({
  'id': 3,
  'value': 0.0155058764871028,
  'condition': 'ECM'
});
data.push({
  'id': 3,
  'value': 0.0162593141280405,
  'condition': 'SAX'
});
data.push({
  'id': 4,
  'value': 0.0162953858863326,
  'condition': 'SAX'
});
data.push({
  'id': 4,
  'value': 0.0172050279098291,
  'condition': 'ECM'
});
data.push({
  'id': 4,
  'value': 0.0140566233578565,
  'condition': 'CM'
});
data.push({
  'id': 5,
  'value': 0.0141510897863713,
  'condition': 'CM'
});
data.push({
  'id': 5,
  'value': 0.0177908403313223,
  'condition': 'ECM'
});
data.push({
  'id': 5,
  'value': 0.0181831372346949,
  'condition': 'SAX'
});

var conditions = new Set(data.map(a => a.condition));
traces = [];
conditions.forEach(function(condition) {
  var newArray = data.filter(function(el) {
    return el.condition == condition;
  });
  traces.push({
    x: newArray.map(a => a.id),
    y: newArray.map(a => a.value),
    name: condition,
    mode: 'markers',
    type: 'scatter'
  })
})
Plotly.plot('myPlot', traces);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myPlot"></div>