# Vega Directed Graph Breaks w/ Input Sliders

**URL:** <https://discuss.elastic.co/t/vega-directed-graph-breaks-w-input-sliders/332589>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [May 4, 2023, 5:38pm UTC](https://discuss.elastic.co/t/vega-directed-graph-breaks-w-input-sliders/332589 "2023-05-04T17:38:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ikiril01](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ikiril01/32/70934_2.png) [@ikiril01](https://discuss.elastic.co/u/ikiril01)\
**Post date:** [May 4, 2023, 5:38pm UTC](https://discuss.elastic.co/t/vega-directed-graph-breaks-w-input-sliders/332589/1 "2023-05-04T17:38:48Z")

</div>

I'm trying to build a force-directed graph in Kibana (v8.3.3) using Vega.

I've got the graph built out successfully, with the caveat that sometimes it can display quite a large amount of data, thus making it overwhelming and not terribly useful. One solution that I thought would be useful would be to make the link distance/node charge/node radius signals configurable by the user using sliders (e.g., "bind": {"input": "range", "min": 5, "max": 100, "step": 1}).

This seems to work great for node charge and radius, however, when I try to add and use a slider for link distance, the visualization immediately errors out in Kibana with a message of "t is undefined". The other weird thing is that when I change the node charge or radius, the links (edges) in the graph don't get redrawn, so it ends up looking rather wonky.

My spec is pretty much identical to the official Vega directed force graph example: [Vega Editor](https://vega.github.io/editor/#/gist/f05615cd055a5f0a7d00880470c541df/spec.json)

I do a few things slightly differently, like enforcing a set color palette for the edges, but that shouldn't affect the use of the slider for the linkDistance signal. I'm quite stumped as everything should be working fine as per the Vega editor, but my graph edges aren't being redrawn correctly and anytime I try to modify the linkDistance using the slider the visualization breaks with the above error.

Here's my full spec (I'm graphing netflow data): [Vega Netflow Directed Graph · GitHub](https://gist.github.com/ikiril01/879824713431ea1a7c4c1bfa51881afa#file-vega_netflow-json)

---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [May 8, 2023, 10:28am UTC](https://discuss.elastic.co/t/vega-directed-graph-breaks-w-input-sliders/332589/2 "2023-05-08T10:28:36Z")

</div>

Hi @ikiril01

I can suggest to open the `Inspect` panel in the Kibana Vega editor, then pick `Vega debug` and select the `Spec` tab to copy the full Vega spec.  
Now you can open the Vega Editor online and paste there the full spec to perform a full investigation.

From my quick inspection it seems that the `link-data` table gets cleared on visualization update, but I had to tweak a little bit your spec to make it work without the original dataset. Can you verify that as well on your side?

---

<div class="post-metadata">

**Author:** ![ikiril01](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/ikiril01/32/70934_2.png) [@ikiril01](https://discuss.elastic.co/u/ikiril01)\
**Post date:** [May 10, 2023, 3:43pm UTC](https://discuss.elastic.co/t/vega-directed-graph-breaks-w-input-sliders/332589/3 "2023-05-10T15:43:34Z")

</div>

Hi @Marco_Liberati, thanks for the reply!

I found the original snippet that I built my Vega spec off of, and you're right, it looks like the `link-data` gets cleared away when you change the link distance: [Vega Editor](https://vega.github.io/editor/#/url/vega/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykSArJQBWENgDsQAGhAB3GgBN6aAQAZVM+DTJYV6mRG3ikAGwhoA2qGMI4acFAAe0kAxwKkmO+nlKYAAgJ-ACYQAF8payRbezAoAE8XNw8vey0dTECQ8MiQG29wcTYFOAAlJAUaBnMZYlMGbwAOCKiY9DAikoBhGCQAJzI7WvrvAFoARgEWvOiCsBMacQBrABEaCEwkcSghkDqTBrQATlVp-NiNzxooF33D1Ew+hrCAXRkUlFQrGbaQAC84HAlqMoBJJDIGH0TGlsHhCARaBtqHRGExqnA+qDxF5sZRQQgCEh+hJRuIaAg2FAlhACMEFFAAOwAZgZjQZwTgqiOCgAZnAFMEBFABWymcFmeMuQoACwEPpIWQEaVMpkCABswTVCiZUGFwXGTB5TJ50tUcGlUCOTPGSEBlrgTGCFt5poI4jgmFkbD6SxEYnBIB53uQmDQoBwfTYOAxmES6BgdAglATmHMERAjy2ECDfQQllAsej9hzCAYJhQMiQ5nQYkhOxccEcEfsKQYCAsAHIAPq1zFwDsvTuKSje7RdmADnIF+JF9AlssVkBV+ybAYehtNvotzxtzs9th1-uDjvDvpwCA4ceT6aFgrz8suZc1g99rs4b2hmSN5voVvt7u9jsA5DgoI59GOODXrkt7FsGC6PtWGb9IMmBvh+G4-iAf57oBR4gZQZ4Xm+UHTrOIARmwwhwFAn6BjQcAmAo1YWCAuEuKuKEuLhaF9LRHEejxtH7oelAUZgbAgG8S7MaxL71jI-G0dx768exyECSptFiRJLyvGcsz2J0cCjB8XFyQUAJAiCYLsfK4jZsG+YZjOd5sIxLg8vRjEyWxCnqaGunQS59hIGQZBnhQqQyOFB44EwcYsXcdhSZ5DFMZYIBYuIPabKkUlRjJSXmIFpEFBRVE0R5XnpV8ewjLcIwQF2WU5Z4yWVjJ5wyC1lx5TewXoIocDYjQqVbh19iLCUzj9WR96Lk+IBTY2GFbr+O7-stjgDv4oz+OMU7OXNcEPhN6A9bluzfmtWEbZ2F1tcBqjHg9XjXiVPwFAsywmZ4i5seglnAlltlZiWTkwegJhsGwSxuB5kZ5ugRm-ZsLhLHAcafVVaU+eZalrgFZ0sb5SGE5Js2ubm8FnbJh6rdumC7h2uHASe4jTSRR1U6Wp3SSu-kM+tTP-opbNbe9rwGFApjnk55znW53rsQNIDepUxjQjIZ6kH0EDeDypj6+8bDIIsYa3WjgOAsDNkyKl7noNpOQgHZgwW1wiAFDLXhkN68TBKo4RSyAJjkMNNXfJ5JjQor0PjWr4HDaG6DiTgoxhzytHDaCJQW5gdBhxbyRtRbQbYgAyjQAIW0laDjNKYRNzI5ZMAx1agIsXjyjRNCkGgjwNBC7il6goDl5gVc12PdUHN44zBOm0ex6AdfoEw5ZUsHmhsLrZc0DHtf1XONBnkw4Fb036YQPECBMG5HeuCPqQzxskYY0fc8rnZF79MnwfpjDoMDmxdn7eGAFfEOyAfTMVaAUIyNRub2BvnfNyLg-hbXrvbRGFtTLI2KMZUy6Yc4EItsnDE+9D4zzXiADeSBL4GEeLDcBs97hyBTHYZuT8UgsMMNPUAhgyCa3sMEfwAAqfwHQCHlEqNUcRkijIyKqGmbqkIxBrVXsfcibAu4UKvgpH+4MvilVgn2FwdAMRXAkNWJk+hWK5WuB7IwpgLgOJuNfZxsdAzenkt4vssC-H1nOuQhOzhX6eNiE4F2cYBERPaAkbe48fHezcgsPO2sKjKKcUIlx7RFGZOqIkwJ8D74KESIws84gyDKHCTkrxUjui9DXEUnMQTQ6LCWC4b61J7DdNRouSolxti8LieAbpawhn1ibrpD6kNyKeBgAjU2uC-q9I6f0l2uie4F37qgQ2Zg4Bfm2KQmeJcX4CKYR-V+Msi5x2Vvbaq9hnbX0uXAAA6ooGpmiv6oEXlwzM9kjHfDmd0nACyXBngAI4MFPiMuppipkGF6GRb6uxcIAA1GZtkoLhSgzgDDmQAJpYoQDi8ylBylkxQpi4W2LFJ4oJihYltLSX0sSHpXSQA)

Is there anything I can do to update the link-data so this doesn't happen?

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [June 7, 2023, 3:44pm UTC](https://discuss.elastic.co/t/vega-directed-graph-breaks-w-input-sliders/332589/4 "2023-06-07T15:44:09Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.
