在 infovis 中将普通线更改为箭头线答案

【问题标题】：Change plain line to arrow line in infovis在 infovis 中将普通线更改为箭头线
【发布时间】：2013-05-01 05:51:47
【问题描述】：

如何在 infovis 中将普通线改为箭头线？

目前块之间有一些线，我找到了一些css文件，但我找不到描述线行为的内容，以便我可以将普通线更改为箭头线。

谢谢。

【问题讨论】：

您的确切图形生成代码是什么？

标签： infovis thejit

【解决方案1】：

一般来说：您不能（也不应该）通过 CSS 更改它。在设置期间定义此类属性。

这里有一个简短的解释：

生成和 Edge 的代码（在网络可视化中是一行）由位于 Options.Edge.js 内部的 Edge 方法/函数生成。

函数Edge 是$jit 对象的属性/模块，其工作方式如下：

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

将overridable 定义为true 很重要，否则您将无法覆盖任何内容。您要搜索的参数是type。允许的值为line、hyperline、arrow，我很确定bezier 也可以工作——不确定这是否适用于每种类型的图表。您也可以定义自定义图形边缘类型 - 文档中缺少示例。

要更改线条/边缘样式，还有另一个在渲染前触发的函数。您只需在图形注册期间定义它$jit.Viz( { /* add here */ } ); - 示例/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 可以提供什么，然后添加您想要的样式或使用闭包定义新样式。

可能还有另一种方法：ForceDirected 图表的示例。查看文档here。

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

也许你甚至可以使用这样的东西：

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

免责声明：我周围没有 Jit/InfoViz 库的工作副本，因此除非您在代码中添加 JSFiddle 示例，否则我无能为力。

编辑

刚才看到你只想改成默认的arrow类型，在配置图的时候输入这个类型就行了。

【讨论】：