Question

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

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

感谢。

Answer 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 );

免责声明：我没有得到theJit / InfoViz库的工作副本，所以除非你用你的代码添加JSFiddle示例，否则我无能为力。

修改

我刚刚读到您只想更改为默认arrow类型，只需在图表配置期间输入此类型。

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

1 个答案:

修改