如何改变d3plus环中的箭头方向
How to change direction of arrow in d3plus ring
如何根据文档将箭头方向从 source
更改为 target
到 source
到 target
在.edges( Array | Object | url )
方法。 D3plus Documentation。
完整代码如下,了解箭头方向
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var connections = [
{"source": "alpha", "target": "beta"},
{"source": "alpha", "target": "gamma"},
{"source": "alpha", "target": "delta"},
{"source": "alpha", "target": "epsilon"},
{"source": "alpha", "target": "peta"},
{"source": "alpha", "target": "zeta"},
{"source": "alpha", "target": "eta"}
]
var visualization = d3plus.viz()
.container("#viz")
.type("rings")
.edges(connections)
.edges({"direction":{"accepted":["source","target"],"value":"source"}})
//.adeges({"direction":{"accepted":["source","target"],"value":"target"}})
.edges({"arrows":true,"color":"#000000"})
.focus("alpha")
.draw()
</script>
控制台消息。
试试这个:
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var connections = [
{"source": "alpha", "target": "beta"},
{"source": "alpha", "target": "gamma"},
{"source": "alpha", "target": "delta"},
{"source": "alpha", "target": "epsilon"},
{"source": "alpha", "target": "peta"},
{"source": "alpha", "target": "zeta"},
{"source": "alpha", "target": "eta"}
]
var visualization = d3plus.viz()
.container("#viz")
.type("rings")
.edges(connections)
.edges({"arrows":true, "color":"#000000"})
.edges({"arrows": { "value": ["source","target"], "direction": "source"}})
.focus("alpha")
.draw()
</script>
如何根据文档将箭头方向从 source
更改为 target
到 source
到 target
在.edges( Array | Object | url )
方法。 D3plus Documentation。
完整代码如下,了解箭头方向
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var connections = [
{"source": "alpha", "target": "beta"},
{"source": "alpha", "target": "gamma"},
{"source": "alpha", "target": "delta"},
{"source": "alpha", "target": "epsilon"},
{"source": "alpha", "target": "peta"},
{"source": "alpha", "target": "zeta"},
{"source": "alpha", "target": "eta"}
]
var visualization = d3plus.viz()
.container("#viz")
.type("rings")
.edges(connections)
.edges({"direction":{"accepted":["source","target"],"value":"source"}})
//.adeges({"direction":{"accepted":["source","target"],"value":"target"}})
.edges({"arrows":true,"color":"#000000"})
.focus("alpha")
.draw()
</script>
控制台消息。
试试这个:
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var connections = [
{"source": "alpha", "target": "beta"},
{"source": "alpha", "target": "gamma"},
{"source": "alpha", "target": "delta"},
{"source": "alpha", "target": "epsilon"},
{"source": "alpha", "target": "peta"},
{"source": "alpha", "target": "zeta"},
{"source": "alpha", "target": "eta"}
]
var visualization = d3plus.viz()
.container("#viz")
.type("rings")
.edges(connections)
.edges({"arrows":true, "color":"#000000"})
.edges({"arrows": { "value": ["source","target"], "direction": "source"}})
.focus("alpha")
.draw()
</script>