Satish Patel Satish Patel - 3 months ago 13
Javascript Question

How to change direction of arrow in d3plus ring

How to change the arrow direction to

target
to
source
from
source
to
target
as per documentation it says to use an
Object
in the
.edges( Array | Object | url )
method. D3plus Documentation.
Complete code is as follows to get to know about the arrow direction.

<!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>


Console message.
Console Message

Answer

Try this:

<!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>