2017-11-16 7 views
5

私はsigma.jsグラフでエッジを描こうとしていますDOTTEDCURVEDです。 私はcustomEdgeShapescurveプラグインを使用していますが、同じエッジに2つの異なるスタイルを組み合わせることはできません。 実際、私は唯一のtype属性に単一のスタイルを適用することができます。sigma.jsのエッジに2種類の異なるタイプを適用する方法

edge.type = 'curvedArrow'; 

または

edge.type = 'dotted'; 

は、どのように私は端に両方のスタイルを適用することができますか?

答えて

0

私は今、1〜2週間、Sigma.jsを使用しています。あなたが望むことを実行する方法はいくつかあると思います。私はプロパティに基づいてノードの色を区別するためにこのメソッドを使いました。以下のコードは、私の(混乱した)頭の上に書かれているので、テストされていない、間違っている可能性があります。

最初の方法は、グラフの作成を開始するときにエッジを押しているときです(私の場合は、すべてのノードとエッジを含むJSON引数を取り込み、シグマインスタンスを作成するために解析を開始します)。これは、それが線か点線かを判断するために使用する条件を取る関数を作成することによって行われます。

function determinetype(determinator){ 
    if (determinator === "parent"){return "dotted"} 
    else if (determinator === "grandparent"){return "line"} 
}; 

for (var i = 0; i<graph.edges.length; i++){ 
    var edgetype = determinetype(graph.edges[i]["conditional_markup"]); 
    g.edges.push({ 
    id:graph.edges[i]["id], 
    source: graph.edges[i]["source"], 
    target: graph.edges[i]["target"], 
    type: edgetype, 
    }) 
} 

第2の方法は、描画後にすべてのエッジを繰り返し処理することです。 1つの引数(判定子)をとり、必要な線種を返す関数を作りたいと思うでしょう。

function get_type(determinator){ 
    if (determinator === "parent"){return "dotted"} 
    else if (determinator === "grandparent"){return "line"} 
}; 
    s.graph.edges().forEach(function(edge){ 
    edge.type = get_type(edge.conditional_markup); 
    }); 

これが役立つことを願っています。

+0

あなたの答えをありがとうが、私は曲線と点線の両方のエッジを持っていると思います。たぶん唯一の方法は、プラグインを書き直すことです... – rikpg

関連する問題