2

描述：

我正在玩Observable Plot，真的很喜欢设置简单的情节是多么容易。

现在我有一个“更高级”的图表，我想绘制并需要帮助。

在我的数据中，我temp在某个特定位置记录了多个（温度）读数timestamp。每个读数来自一个sensor，并且每个sensor都连接到某个device（多个传感器（例如，1-3）可以连接到单个设备（例如，2））。因此，一个数据点可能如下所示（请参阅底部脚本以获取完整的最小 workabel 示例）：

{
  timestamp: 1,
  device: 1,
  sensor: 1,
  temp: 20
}

目前，我对这些数据进行点图，根据传感器对其进行分面(device, sensor)，并为每对系列赋予颜色（只需在代码段下方运行以获得更好的感觉）。

问题：

我现在想用黑线连接所有相同颜色的点。// HERE I NEED HELP我在片段中标记了有问题的行。我假设我必须以某种方式data根据颜色进行分组device并sensor实现与颜色相似的分组，但遗憾的是我不知道如何实现这一点，希望您能提供帮助！

const plotTestTemperatures = function(data) {
  const div = document.getElementById('temp-chart-test')
  div.appendChild(Plot.plot({
    color: {
      type: "ordinal",
      scheme: "category10",
      legend: true
    },
    facet: { data: data, x: "device", grid: true,}, 
    grid: true,
    marks: [
      Plot.frame(),
      Plot.dot(data, {x: "timestamp", y: "temp", r: 4, opacity: 0.8, fill: d => `Sensor ${d.sensor} of device ${d.device}` }),
      // HERE I NEED HELP
      // does not yet work, connects all dots independent of color
      // Plot.line(data, {x: "timestamp", y: "temp", opacity: 0.8, stroke: "black" })
    ],              
  }));
}

// call with test data
plotTestTemperatures([
  {
    timestamp: 1,
    device: 1,
    sensor: 1,
    temp: 20
  },
  {
    timestamp: 2,
    device: 1,
    sensor: 1,
    temp: 21
  },
  {
    timestamp: 3,
    device: 1,
    sensor: 1,
    temp: 22
  },
  {
    timestamp: 1,
    device: 1,
    sensor: 2,
    temp: 20.1
  },
  {
    timestamp: 2,
    device: 1,
    sensor: 2,
    temp: 21.3
  },
  {
    timestamp: 3,
    device: 1,
    sensor: 2,
    temp: 22.5
  },
  {
    timestamp: 1,
    device: 2,
    sensor: 1,
    temp: 18
  },
  {
    timestamp: 2,
    device: 2,
    sensor: 1,
    temp: 19
  },
  {
    timestamp: 3,
    device: 2,
    sensor: 1,
    temp: 20
  },
  {
    timestamp: 1,
    device: 2,
    sensor: 2,
    temp: 17.8
  },
  {
    timestamp: 2,
    device: 2,
    sensor: 2,
    temp: 19.1
  },
  {
    timestamp: 3,
    device: 2,
    sensor: 2,
    temp: 20.1
  },
])
<html>

<head>
    <meta name=”robots” content=”noindex”&gt;
    <meta charset="UTF-8">
    <title>Home Automation</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.4"></script>
</head>

<body>
    <div id="app">
        <h1>Home Automation</h1>
        <div id="temp-chart-test"></div>
    </div>
</body>
</html>

（交叉发布到ObservableHQ 论坛）

4

1 回答 1

1

我想你想要的是

z: (d) => `Sensor ${d.sensor} of device ${d.device}`,
于 2022-02-07T11:29:40.333 回答