0

如何在 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();

我们是否可以根据节点为节点指定特定颜色，tier以便像我们一样为环形图添加图例变得容易tree_map？非常感谢任何有关如何为戒指添加图例的建议。

4

1 回答 1

0

在 hack 之后完成了这项工作。

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();
于 2016-08-26T09:17:53.990 回答