如何在 infovis 中将普通线更改为箭头线?
目前块之间有一些线,我找到了一些 css 文件,但我找不到描述线行为的内容,以便我可以将普通线更改为箭头线。
谢谢。
Generally spoken: You can't (and shouldn't) change it via CSS. Define such properties during the setup.
Here's a brief explanation:
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
}
}
} );
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;
}
}
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.
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.