將字段設置為數組中的 object，Vega-lite

Question

我有一個對象數組，我將它們用作交互式數據儀表板中的數據集。 我想添加一項新功能，一次只顯示一個 object 的數據，而不是從所有對象中提取數據（我已經在這樣做並且效果很好）。 作為測試用例，我創建了一個簡單的數組：

var test1 = [
  [{
    "name": "Piece One",
    "amount": 5
  }, {
    "name": "Piece Two",
    "amount": 5
  }, {
    "name": "Piece Three",
    "amount": 5
  }],
  [{
    "name": "Piece One",
    "amount": 1
  }, {
    "name": "Piece Two",
    "amount": 1
  }, {
    "name": "Piece Three",
    "amount": 5
  }]
];

和 Vega-lite javascript：

var pieCreate = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "title": "A pie chart",
  "description": "A simple pie chart with embedded data.",
  "width": "container",
  "height": "container",
  "data": {
    "values": test1[0]
  },
  "mark": "arc",
  "encoding": {
    "theta": {
      "field": "amount",
      "type": "quantitative"
    },
    "color": {
      "field": "name",
      "type": "nominal",
      "legend": null
    }
  }
};

這可行，但我希望用戶能夠選擇顯示哪個 object（在儀表板中，每個 object 都包含不同學校的數據，我希望用戶能夠使用下拉菜單選擇要顯示哪個學校的數據） . 我的第一個想法是在"data": {"values":字段中設置一個信號，將括號中的數字更改為我想要的數組，但經過反復試驗，我認為這可能是一個死結尾。 信號應該可以修改"field": "amount"和"field": "name"但我已經嘗試了我能想到的 [0].amount 的每一次迭代，同時從test1[0]中刪除了括號並且什么都沒有已經工作了。 如果我可以通過在"field":我相信我可以使用信號和 html 表格找出過程，但我開始懷疑我是否走在正確的軌道上。

我還嘗試了 vega-lite 文檔中概述的過程： https://vega.github.io/vega-lite/tutorials/streaming.html ，但它做的事情比我想做的要復雜得多，而我的 javascript 知識不足以將其分解為可用的東西。 有沒有人對如何使用上述任何方法（或新的更好的方法）使這項工作有任何想法？

Answer 1

您可以使用vega Api來更改數據。 根據您的選擇，添加更改事件，在某些情況下，您可以使用這些 API 在數據之間切換。 請參考以下代碼片段或小提琴：

 var test1 = [ [{ "name": "Piece One", "amount": 5 }, { "name": "Piece Two", "amount": 5 }, { "name": "Piece Three", "amount": 5 }], [{ "name": "Piece One", "amount": 1 }, { "name": "Piece Two", "amount": 1 }, { "name": "Piece Three", "amount": 5 }] ]; var yourVlSpec = { "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "title": "A pie chart", "description": "A simple pie chart with embedded data.", "width": "350", "height": "400", "data": { "values": test1[0] }, "mark": "arc", "encoding": { "theta": { "field": "amount", "type": "quantitative" }, "color": { "field": "name", "type": "nominal", "legend": null } } } var view; vegaEmbed("#vis", yourVlSpec).then(res => { view = res.view; }); function handleChange(a, b) { var selectValue = document.getElementById("myselect").value; if (selectValue == 'A') { view.data('source_0', test1[0]); } else { view.data('source_0', test1[1]); } view.runAsync(); }

 <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2/build/vega.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0/build/vega-lite.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.17.0/build/vega-embed.min.js"></script> <select id="myselect" style="width:100px;" onchange="handleChange()"> <option>A</option> <option>B</option> </select> <br> <div id="vis"></div>