Search code examples
javascriptd3plus

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

Solution

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