矢印とテキストクリックとホバーの後に

私はいくつかの基本的な基本を学ぶために新しいプロジェクトを始めていますd3.js。ここで私のおもちゃの問題です：私は、いくつかの長方形のインタラクティブなフローチャートを描きたいと思って、ユーザーが1つの上を飛ぶ/クリックすると、シーン内の他の矩形を指す矢印で依存関係を表示したいと思います。私はまた、このユーザアクションに条件付きのテキストを他の場所に表示したいと思います。矢印とテキストクリックとホバーの後に

エンドの目標は、このようなものです：

index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://d3js.org/d3.v4.min.js"></script> 
    </head> 
    <body> 
     <script src="script.js"></script> 
    </body> 
</html>

：

ここではいくつかの基本的なチュートリアルに触発された私の出発点は、ですscript.js

var s = 50; 
var w = 200; 
var h = 100; 

var jsonBoxes = [ 
    {"name": "Box A", "x_axis": s, "y_axis": s, "width": w, "content": "content of Box A", "depends" : "Box C"}, 
    {"name": "Box B", "x_axis": w + 2*s, "y_axis": s, "width": w, "content": "content of Box B", "depends" : "Box D"}, 
    {"name": "Box C", "x_axis": 2*(w + s) + s, "y_axis": s, "width": w, "content": "content of Box C", "depends" : "Box D" }, 
    {"name": "Box D", "x_axis": s, "y_axis": 2*s +h, "width": w, "content" : "content of Box D" , "depends": "Box F"}, 
    {"name": "Box E", "x_axis": w + 2*s, "y_axis": 2*s+h, "width": w, "content": "content of Box E", "depends" : "Box F" }, 
    {"name": "Box F", "x_axis": 2*(w + s) + s, "y_axis": 2*s+h, "width": w, "content": "content of Box F", "depends" : "Box A" }]; 

var svgContainer = d3.select("body").append("svg") 
            .attr("width", 800) 
            .attr("height", 300); 

var rectangles = svgContainer.selectAll("rect") 
          .data(jsonBoxes) 
          .enter() 
          .append("rect"); 

var rectanglesAttributes = rectangles 
         .attr("x", function (d) { return d.x_axis; }) 
         .attr("y", function (d) { return d.y_axis; }) 
         .attr("width", function (d) { return d.width; }) 
         .attr("height", 100) 
         .style("fill", function(d) { return "Cornsilk"; }); 

var p = d3.select("body").selectAll("p") 
    .data(jsonBoxes) 
    .enter() 
    .append("p") 
    .text(function(d) { return d.name + ": " + d.content; });

誰かがオンホバーまたはオンクリックに対処し、これに基づいてコンテンツ（矢印、テキスト）を生成する一般的な手順を説明できますか？

PS：データをより適切な形式で前処理するのに非常にうれしいです。私はyamlを入力形式として使用しました。必要に応じてjsonを生成するのは簡単です。 d3のマッピングとインタラクティブ機能は、私が初心者だからです。

出典

2017-08-04 baptiste

最初に：<svg>には、<p>の代わりに<text>があり、不満足なことに、それ自体はラップされません。テキストを折り返すには、Mike Bostock's Blockをチェックしてください。

selection.on('click', function (data, index) { 
    stuff(); 
})

そしてホバリングclickの代わりにmouseoverとmouseoutを使用しています：

一般的にクリック機能がこの形式をとります。主題については、clickは矢印を表示することを賢明に選択し、mouseoverは「他のテキスト」を表示するように思われます。

rectangles.on('click', function (d, i) { //1 
    d3.select('svg').append('path').attr('d', pathString); //2 
    d3.selectAll('rect').filter(function (k, j) { 
     return k.name == d.depends; //3 
    }).each(function() { 
     d3.select(this).on('click')(); //4 
    }); 
}).on('mouseover', function (d, i) { //5 
    d3.select('text#moreinfo').text(d.extraInfo); 
});

矢印はpath要素が必要になります、そしてあなたは、各ヘッドにpolygon要素を追加しない限り、彼らは頭を持っていません。あなたのケースでは、それはこのようになります。

各矩形にクリックイベントをアタッチします。
svgに追加します。path要素（これは1行です）。
その名前から前提条件のコースrectを見つけます。
これらの（または単数の）前提条件の矩形のそれぞれについてclickイベントを呼び出します。各クリックイベントはこのように設定されているため、実際にはチェーンの前提条件ごとに矢印を描く再帰呼び出しです。
「他のテキストのテキスト」text要素のテキストを変更するマウスのホバーハンドラを添付します（これを前もって作成した場合）。

画像のように矢印を冷たく湾曲させるには、パスのコントロールポイントを計算する必要があります。 Hereは、キュービックベジエ曲線のパスがどのように機能するかを説明するクールなグラフィックです。いくつかの基本的なジオメトリを使ってコントロールポイントを計算できるはずです。

最初にsvgに精通していることをお勧めします。

出典

2017-08-05 01:38:40

ありがとうございました。テキストラッピングのブロックを見ましたが、それは棒グラフの一部であるため、かなり複雑な例です。私は、単にdivや、ページの下の何かを使ってもっと簡単なものを見つけたいと思っています（おそらくsvgとは別に）。矢印やベジエ曲線については、私が見た例（折りたたみ可能な木など）に基づいて、d3が私にとって見栄えの良い道を作ることができると思っていたでしょう。つまり、私のレイアウトは静的なので、単に矢印をインクスケープに描き、d3はクリック/ホバーするときに色を変えるだけです。 – baptiste

それはすばらしいアイデアのように思えますし、もしあなたがそれにしているなら、私はそれを動的にやろうとします。私は率直に言って、[trees]（https://github.com/d3/d3-hierarchy/blob/master/README.md#treemap）にはあまりよく知られていません（あなたの状況にどれくらい適しているか分かりません）しかし、あなたは[this]（http://bl.ocks.org/robschmuecker/7880033）のようなことをすることができますが、ノードの矩形を作成し、その上に 'text'を置きます。 –

また、 'div'アイデアの場合は' d3'を 'DOM'マニピュレータとして、' d3.select（ 'body'）。append（ 'div'）のような文でjQueryと同じように使用できます。）;それは確かにラッピングをはるかに容易にするでしょう。 –

矢印とテキストクリックとホバーの後に

答えて

関連する問題