时间戳

首页 > 解决方案 > 将字段设置为数组中的对象，Vega-lite

javascript - 将字段设置为数组中的对象，Vega-lite

问题描述

我有一组对象，我将它们用作交互式数据仪表板中的数据集。我想添加一项新功能，该功能一次仅显示一个对象的数据，而不是从所有对象中提取数据（我已经在这样做并且效果很好）。作为一个测试用例，我创建了一个简单的数组：

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
    }
  }
};

这可行，但我希望用户能够选择要显示的对象（在仪表板中，每个对象都包含不同学校的数据，我希望用户能够使用下拉菜单选择要显示的学校数据） . 我的第一个想法是在字段中设置一个信号"data": {"values":，将括号中的数字更改为我想要的数组，但经过大量试验和错误后，我认为这可能是一个死胡同。信号应该可以修改"field": "amount"，"field": "name"但是我已经尝试了我能想到的 [0].amount 的每次迭代，同时删除了括号，但test1[0]没有任何效果。如果我可以通过直接引用来访问该对象"field":我相信我可以使用信号和 html 表单来弄清楚这个过程，但我开始怀疑我是否在正确的轨道上。

我还尝试了 vega-lite 文档中概述的过程：https ://vega.github.io/vega-lite/tutorials/streaming.html ，但它做的事情比我想做的要复杂得多，而且我的 javascript 知识不足以将其分解为可用的东西。有没有人对如何使用上述任何方法（或新的更好的方法）进行这项工作有任何想法？

标签： javascriptarraysdata-visualizationvega-lite

解决方案

您可以使用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>

推荐阅读