This is a variation of the Vega Radial-Tree-Layout Example, where I have introduced a "legends"
element to the spec.
"legends": [
{"fill": "color", "type": "symbol", "title": "depth", "orient": "top-right"}
]
In a previous version of this chart, the legend would not appear; it did not have an orient
element.
As it turns out, it seems necessary to supply a value for orient
for this graph, but not for the tree-layout. Further, it a value of "right"
did not work - it needed "top-right"
, which would present a problem if there is more than one legend that you wanted to appear together.
xxxxxxxxxx
<html>
<head>
<!-- uploaded using vegawidget -->
<script src="https://cdn.jsdelivr.net/npm/vega@4.2.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc6"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.19.2"></script>
<link rel="stylesheet" type="text/css" href="vega-embed.css">
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
const spec = "spec.json";
const opt = {"defaultStyle":true,"renderer":"canvas"};
vegaEmbed('#vis', spec, opt).then(function(result) {
// access view as result.view
}).catch(console.error);
</script>
</body>
</html>
https://cdn.jsdelivr.net/npm/vega@4.2.0
https://cdn.jsdelivr.net/npm/vega-lite@3.0.0-rc6
https://cdn.jsdelivr.net/npm/vega-embed@3.19.2