Я создал иерархическую диаграмму связывания ребер в Vega, как показано в этой ссылке: https://vega.github.io/vega/examples/edge-bundling/ Я также изменил свой набор данных JSON и зависимости соответственно. Зависимость JSON выглядит следующим образом:
[{
"source": 67,
"target": 67,
"number": 21.1234588
},{..
Как можно использовать значения «число», чтобы изменить цвет линий между каждыми двумя узлами «источник» и «цель» с помощью цветовой схемы ? (https://vega.github.io/vega/docs/schemes/) То, что я уже пробовал, это строка:
{"value": "parent.number === active", "signal": {"scheme": "accent"}}
вместо этой строки, которая была дана в обновлении, которое я удалил:
{"value": "steelblue"}
Но теперь линии полностью черные вместо того, чтобы иметь разные цвета в зависимости от номера значения. Это весь код:
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"description": "A network diagram of software dependencies, with edges grouped via hierarchical edge bundling.",
"padding": 5,
"width": 720,
"height": 720,
"autosize": "none",
"signals": [
{
"name": "tension", "value": 0.85,
"bind": {"input": "range", "min": 0, "max": 1, "step": 0.01}
},
{
"name": "radius", "value": 280,
"bind": {"input": "range", "min": 20, "max": 400}
},
{
"name": "extent", "value": 360,
"bind": {"input": "range", "min": 0, "max": 360, "step": 1}
},
{
"name": "rotate", "value": 0,
"bind": {"input": "range", "min": 0, "max": 360, "step": 1}
},
{
"name": "textSize", "value": 8,
"bind": {"input": "range", "min": 2, "max": 20, "step": 1}
},
{
"name": "textOffset", "value": 2,
"bind": {"input": "range", "min": 0, "max": 10, "step": 1}
},
{
"name": "layout", "value": "cluster",
"bind": {"input": "radio", "options": ["tidy", "cluster"]}
},
{ "name": "colorIn", "value": "firebrick" },
{ "name": "colorOut", "value": "firebrick" },
{ "name": "originX", "update": "width / 2" },
{ "name": "originY", "update": "height / 2" },
{
"name": "active", "value": null,
"on": [
{ "events": "text:mouseover", "update": "datum.id" },
{ "events": "mouseover[!event.item]", "update": "null" }
]
}
],
"data": [
{
"name": "tree",
"url": "flare.json",
"transform": [
{
"type": "stratify",
"key": "id",
"parentKey": "parent"
},
{
"type": "tree",
"method": {"signal": "layout"},
"size": [1, 1],
"as": ["alpha", "beta", "depth", "children"]
},
{
"type": "formula",
"expr": "(rotate + extent * datum.alpha + 270) % 360",
"as": "angle"
},
{
"type": "formula",
"expr": "inrange(datum.angle, [90, 270])",
"as": "leftside"
},
{
"type": "formula",
"expr": "originX + radius * datum.beta * cos(PI * datum.angle / 180)",
"as": "x"
},
{
"type": "formula",
"expr": "originY + radius * datum.beta * sin(PI * datum.angle / 180)",
"as": "y"
}
]
},
{
"name": "leaves",
"source": "tree",
"transform": [
{
"type": "filter",
"expr": "!datum.children"
}
]
},
{
"name": "dependencies",
"url": "flare-dependencies.json",
"transform": [
{
"type": "formula",
"expr": "treePath('tree', datum.source, datum.target)",
"as": "treepath",
"initonly": true
}
]
},
{
"name": "selected",
"source": "dependencies",
"transform": [
{
"type": "filter",
"expr": "datum.source === active || datum.target === active"
}
]
}
],
"marks": [
{
"type": "text",
"from": {"data": "leaves"},
"encode": {
"enter": {
"text": {"field": "name"},
"baseline": {"value": "middle"}
},
"update": {
"x": {"field": "x"},
"y": {"field": "y"},
"dx": {"signal": "textOffset * (datum.leftside ? -1 : 1)"},
"angle": {"signal": "datum.leftside ? datum.angle - 180 : datum.angle"},
"align": {"signal": "datum.leftside ? 'right' : 'left'"},
"fontSize": {"signal": "textSize"},
"fontWeight": [
{"test": "indata('selected', 'source', datum.id)", "value": "bold"},
{"test": "indata('selected', 'target', datum.id)", "value": "bold"},
{"value": null}
],
"fill": [
{"test": "datum.id === active", "value": "firebrick"},
{"test": "indata('selected', 'source', datum.id)", "signal": "colorIn"},
{"test": "indata('selected', 'target', datum.id)", "signal": "colorIn"},
{"value": "black"}
]
}
}
},
{
"type": "group",
"from": {
"facet": {
"name": "path",
"data": "dependencies",
"field": "treepath"
}
},
"marks": [
{
"type": "line",
"interactive": false,
"from": {"data": "path"},
"encode": {
"enter": {
"fill": {"scale": "color", "field": "name"},
"interpolate": {"value": "bundle"},
"strokeWidth": {"value": 1.5}
},
"update": {
"stroke": [
{"test": "parent.source === active", "signal": "colorIn"},
{"test": "parent.target === active", "signal": "colorIn"},
{"value": "parent.number === active", "signal": {"scheme": "accent"}}
],
"strokeOpacity": [
{"test": "parent.source === active || parent.target === active", "value": 1},
{"value": 0.2}
],
"tension": {"signal": "tension"},
"x": {"field": "x"},
"y": {"field": "y"}
}
}
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": ["depends on", "imported by"],
"range": [{"signal": "colorIn"}, {"signal": "colorOut"}]
}
],
"legends": [
{
"stroke": "color",
"orient": "bottom-right",
"title": "Dependencies",
"symbolType": "stroke"
}
]
}