在不为数据声明多个变量的情况下创建散点图答案

【问题标题】：Creating a scatter plot in plotly without declaring multiple variables for the data在不为数据声明多个变量的情况下创建散点图
【发布时间】：2018-05-22 14:03:57
【问题描述】：

以下记录是我想使用 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'
};

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

【问题讨论】：

使用箭头函数过滤数据怎么样？
你能给我看任何示例代码吗？

标签： javascript plot plotly scatter-plot plotly.js

【解决方案1】：

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

遍历你的一组conditions

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>

【讨论】：

这正是我想要的。干杯！