2

M Bostock ( http://bl.ocks.org/mbostock/7607999 ) の実装に基づいて、動的な階層エッジ バンドルを作成しようとしています。

ここに画像の説明を入力

私のデータセットの bl.ocks バージョンはこちらです: http://bl.ocks.org/ratnakarv/91ace0b5f77fff5ef0ab

ノード 1 とノード 2 の間の関係が一方向である元のデータとは異なり (つまり、ノード 1 がノード 2 をインポートするか、またはその逆)、私のデータ セットでは、ノード 1 とノード 2 は双方向のインポート関係を持つことができます。これはビジネス プロセス フローで非常に頻繁に発生するため、これを適用する予定です。

  • 現在の課題:

この例では、'評価' は 'QOS 劣化レポートの作成' をインポートし、'QOS の作成...' は '評価' もインポートします。しかし、マウスが上にあると、「評価」、ノード - 「作成..」は赤で表示されますが、線は緑です。マウスがノードの「Create...」の上にある場合、インポート行と「Assess」が赤く表示されます。

  • 望ましい要件:

私の要件は、双方向のインポートが存在する場合、次のいずれかです。1.ラインと他のノードを3番目の色(赤または緑以外)で表示するか、2.ラインと他のノードを赤で表示します。 .

これへのポインタは役に立ちます。私は D3 の基本的な知識を持っていますが、データ ビジュアライゼーションの専門家ではなく、仕事の分野でより良いコミュニケーションのためにビジュアライゼーションを使用しようとしているだけです。

4

1 に答える 1

3

これにはいくつかの方法がありますが、これは今のところ私が考えることができる最も簡単な方法です。

block.lockの間には 2 つのパスがあり、等しいが反対の値を持つことに注意してください (これらは互いにソースとターゲットの両方であるため)。そのうちの 1 つがもう一方の上に正確に配置され、1 つのパスのように見えます。そのため、これら 2 つのノード間のリンクは多少ギザギザになっていますが、他のノードは滑らかです。おそらく、これを利用することができます。AssessCreate QoS Degradation Report

link--sourceCSS のおよびの定義をlink--target不透明度の値が 1 未満になるように調整すると、部分的に透明なソース リンクが部分的に透明なターゲット リンクに重なり、「新しい」別の色の外観になります。

node--bothノードの色については、「新しい」色で新しい CSS クラスを作成し、関数でn.sourceとの両方n.targetが true の場合、それをノードに適用しmousoveredます。

node
    .classed("node--both", function(n) { return n.source && n.target; })
    .classed("node--target", function(n) { return n.target; })
    .classed("node--source", function(n) { return n.source; });

完璧ではありませんが、これを示すフィドルがあります: http://jsfiddle.net/w2rfwokx/

重要なのは、ソース リンクとターゲット リンクの色と不透明度の値を適切に選択することです (私はしませんでした)。これにより、ソース リンクとターゲット リンクとは十分に異なる新しい色が得られ、ソースまたはターゲット リンクに関係なく同じ色が得られます。ターゲット リンクは「上」です。現在のフィドル バージョンでは、アクティブなノードによって色がわずかに異なることがわかります。このスレッドまたは同様のものが役立つ場合があります。

配列を操作linksして 2 つの同一のパスを 1 つにマージし、これがソースとターゲットのリンクであることを示す属性を追加して、後で処理中にこの属性を使用することもできます。

更新:あなたのコメントには正しい考えがあります。とにかく、色のトリックはハックのようなものでした.

links配列には、双方向インポート ノード間の 1 つのパスの 2 つの項目が含まれています。それらの 1 つを削除し、もう 1 つの属性を設定して、これが双方向のインポートであることを示しましょう。

var unique_links = links.reduce(function(p,c) {
    var index=p.map(function(d,i) { if(d.source===c.target && d.target===c.source) return i;}).shift();
    if(!isNaN(index)) p[index].both=true; else p.push(c);
    return p;
 },[]);

現在unique_links、エッジごとに 1 つの要素しかなく、その 1 つの要素には がありboth=trueます。bothまた、属性をバンドル レイアウトに渡しましょう。

link = link
      .data(bundle(unique_links))
    .enter().append("path")
      .each(function(d) {
        d.source = d[0], 
        d.target = d[d.length - 1],
        d.both = unique_links.filter(function(v) { if (v.source===d.source && v.target===d.target) return v.both; }).shift();
      })
      .attr("class", "link")
      .attr("d", line);

最後のステップは、mouseovered関数を変更して、次のように異なる色の新しい CSS クラスを設定することbothです。

function mouseovered(d) {
  node
      .each(function(n) { n.target = n.source = false; });

  link
      .classed("link--both", function(l) { if((l.target===d || l.source===d) && l.both) return l.source.source = l.source.target = l.target.source = l.target.target = true;})
      .classed("link--target", function(l) { if (l.target === d && !l.both) return l.source.source = true; })
      .classed("link--source", function(l) { if (l.source === d && !l.both) return l.target.target = true; })
    .filter(function(l) { return l.target === d || l.source === d; })
      .each(function() { this.parentNode.appendChild(this); });

  node
      .classed("node--both", function(n) { return n.target && n.source; })
      .classed("node--target", function(n) { return n.target; })
      .classed("node--source", function(n) { return n.source; });
}

でクラスをリセットしますmouseouted。

function mouseouted(d) {
  link
      .classed("link--both", false)
      .classed("link--target", false)
      .classed("link--source", false);

  node
      .classed("node--both", false)
      .classed("node--target", false)
      .classed("node--source", false);
}

CSS で新しいクラスを定義することを忘れないでください。

.link--both {
  stroke: orange;
}

.node--both {
  fill: orange;
}

完全なコードで更新されたフィドルは次のとおりです: http://jsfiddle.net/w2rfwokx/1/

于 2014-10-03T04:54:09.787 に答える