Change plain line to arrow line in infovis

Question

How to change plain line to arrow line in infovis?

Currently there are some lines between blocks, I found some css files, but I cannot find which content describing the line behaviour such that I can change the plain line to arrow line.

Thanks.

Answer 1

Generally spoken: You can't (and shouldn't) change it via CSS. Define such properties during the setup.

Here's a brief explanation:

• The Code that generates and Edge (which is a line in network visualizations) is generated by the Edge method/function which sits inside Options.Edge.js.

• The function Edge is a property/module of the $jit object and works like this:

  var viz = new $jit.Viz({  
    Edge: {  
        overridable:  true,  
        type:         'line',  
        color:        '#fff',  
        CanvasStyles: {  
            : '#ccc',  
            shadowBlur: 10  
        }  
      } 
  } );
  

• It's important that you define overridable as true as you else can't override anything. The parameter that you're searching for is type. The allowed values are line, hyperline, arrow and I'm pretty sure that bezier will work as well - not sure if this is true for every type of graph. You can as well define custom graph Edge types - an example is missing in the documentation.

• To change the Line/Edge style, there's another function that triggers before rendering. You just have to define it during the graph registration $jit.Viz( { /* add here */ } ); - code from the example/Spacetree here:

  // This method is called right before plotting  
  // an edge. It's useful for changing an individual edge  
  // style properties before plotting it.  
  // Edge data proprties prefixed with a dollar sign will  
  // override the Edge global style properties.  
  onBeforePlotLine: function(adj){  
      if (adj.nodeFrom.selected && adj.nodeTo.selected) {  
          adj.data.$color = "#eed";  
          adj.data.$lineWidth = 3;  
      }  
      else {  
          delete adj.data.$color;  
          delete adj.data.$lineWidth;  
      }  
  

  }

• The final step would now be to inspect what add.data can deliver and then either add the style you want or define a new one using a closure.

There might be another way to go on this: Example for a ForceDirected graph. Take a look at the documentation here.

$jit.ForceDirected.Plot.plotLine( adj, canvas, animating );

Maybe you could even use something like this:

var edge = viz.getEdge('Edge_ID');
edge.setData( property, value, type );

Disclaimer: I got no working copy of theJit/InfoViz library around, so I can't help more than that unless you add a JSFiddle example with your code.

Edit

As I just read that you only want to change to the default arrow type, just enter this type during the configuration of the graph.