描述：
我正在玩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”>
<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/[email protected]"></script>
</head>
<body>
<div id="app">
<h1>Home Automation</h1>
<div id="temp-chart-test"></div>
</div>
</body>
</html>（交叉發布到ObservableHQ 論壇）
uj5u.com熱心網友回復：
我想你想要的是
z: (d) => `Sensor ${d.sensor} of device ${d.device}`,
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427195.html
標籤：javascript d3.js 可观察的 可观察图