d3plusでリングの凡例を実装する方法

Question

d3plusでリングノードの凡例を追加する方法。データは以下の通りです：

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(); 

それは我々がtree_mapのために持っているように、リングチャートの凡例を追加することが容易になるように、私たちは彼らのtierに基づいてノードに特定の色を指定することはできますか？凡例をどのように追加するかについてのご意見は高く評価されます。

Answer 1

ハッキングに続いて作業が行われました。

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();