So implementieren Sie Legenden für Ringe in d3plus

Question

So fügen Sie Legenden für Ringknoten in d3plus hinzu. Die Daten sind wie folgt:

var connections = [{ "source": "alpha", "target": "beta"},{ "source": "alpha", "target": "gamma"},{ "source": "beta", "target": "delta"}, 
    { "source": "beta", "target": "epsilon"},{ "source": "gamma", "target": "tau"},{ "source": "gamma", "target": "zeta"}, 
    { "source": "gamma", "target": "theta"},{ "source": "eta", "target": "gamma"},{ "source": "iota", "target": "mu"}, 
    { "source": "iota", "target": "gamma"},{ "source": "kappa", "target": "beta"},{ "source": "lambda", "target": "beta"}, 
    { "source": "lambda", "target": "mu"},{ "source": "lambda", "target": "upsilon"},{ "source": "kappa", "target": "nu"}, 
    { "source": "pi", "target": "sigma"},{ "source": "pi", "target": "delta"},{ "source": "delta", "target": "rho"}, 
    { "source": "rho", "target": "xi"},{ "source": "xi", "target": "psy"},{ "source": "psy", "target": "phi"}, 
    { "source": "phi", "target": "tau" }, { "source": "tau", "target": "omega" }]; 

var tier_data = [{ "tier": 0, "name": "alpha" },{ "tier": 1, "name": "beta" },{ "tier": 1, "name": "gamma" },{ "tier": 2, "name": "delta" }, 
    { "tier": 0, "name": "epsilon" },{ "tier": 1, "name": "zeta" } 
    { "tier": 1, "name": "tau" },{ "tier": 3, "name": "iota" }, 
    { "tier": 2, "name": "kappa" },{ "tier": 2, "name": "lambda" }, 
    { "tier": 3, "name": "nu" },{ "tier": 1, "name": "upsilon" }, 
    { "tier": 1, "name": "sigma" },{ "tier": 0, "name": "pi" }, 
    { "tier": 1, "name": "rho" },{ "tier": 2, "name": "xi" }, 
    { "tier": 3, "name": "omega" },{ "tier": 2, "name": "psy" }]; 

var visualization = d3plus.viz() 
.container("#viz") 
.type("rings") 
.edges({ "value": connections }) 
.edges({"arrows" : true}) 
.data(tier_data) 
.legend({ "order" : { "sort": "desc", "value":"tier" } }) 
.focus("alpha") 
.draw(); 

Können wir eine bestimmte Farbe zu Knoten auf der Grundlage ihrer tier angeben, so dass es leicht wird, Legenden für Ringdiagramm hinzufügen, wie wir für tree_map haben? Jeder Vorschlag zum Hinzufügen von Legenden zum Ring wird sehr geschätzt.

Answer 1

Folgende Hack tat die Arbeit.

var button = "<div id='first' align='center'> 
<div id='tier1'>Tier 1</div> <div id='tier2'>Tier 2</div> 
</div><div id='second' align='center'> <div id='tier3'>Tier 3</div> 
<div id='tier4'>Tier 4</div> </div>" 
var visualization = d3plus.viz() 
.container("#viz") 
.type("rings") 
.edges(connections) 
.edges({ "arrows": true }) 
.focus("Alpha") 
.data(tier_data) 
.color("tier") 
.tooltip({ "html": button }) 
.draw();