質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

ノード同士で結ばれている辺の太さを変更したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,180

nano-dia

score 22

前提・実現したいこと

jsonファイルを読み出しD3.jsを使ってグラフを書いています。

{
"nodes":[
{"name":"0"},
{"name":"1"}
],
"links":[
{"source":0, "target":1}
]
}


このJSONファイルを読み出したとき,下の図のように0から1に向かうようにしています。
0から1に向かって矢印
ここまではできたのですが,ここからノードをマウスオーバーしたときにノードの線を太くしたいのですが,
マウスオーバーイベント
上の図ように矢印も影響され,大きくなってしまい困っています。辺だけ太くするにはどうしたら良いのでしょうか。
皆さんのお力を貸していただけないでしょうか。よろしくお願いします。

発生している問題

mouseoverイベント発生させると,矢印も影響してしまう問題。

該当のソースコード

<style>
.node {
stroke: black;
stroke-width: 10.5px;
}
.link {
stroke: black;
}
.link.active{
stroke-width:5px;
}
.text {
width:60px;height:30px;position:absolute;
}
</style>

<script>
d3.json("test.json", function(error, graph) {

nodes = graph.nodes;    
links = graph.links;

force.nodes(nodes)
.links(links)
.start();

link = svg.selectAll("line")
.data(links)
.enter().append("line")
.attr("class", "link")
.style('marker-end','url(#end-arrow)');

node = svg.selectAll("circle") 
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 30) 
.style("fill", "black")
.call(force.drag)
.on("mouseover", mouseover);

//ノードの名前
id = svg.selectAll("text.id")
.data(nodes)
.enter() 
.append("text")
.attr("class","id")
.text(function(d){return d.name;})
.attr("font-family", "sans-serif")
.attr("font-size", "35px")
.attr("text-anchor","middle")
.attr("fill", "white")
.attr("font-weight", "bold") 
.attr("stroke","black")
.call(force.drag)


/*矢印*/
svg.append('svg:defs').append('svg:marker')
.attr('id', 'end-arrow')
.attr('viewBox', '-10 -10 15 20')
.attr('refX', 12)
.attr('markerWidth', 90)
.attr('markerHeight', 60)
.attr('orient', 'auto') //矢印の向き
.append('svg:path')
.attr('d', 'M-10,-5L0,0L-10,5')
.attr('fill', 'red');


function mouseover(d) {
    svg.selectAll("line").classed("active", function(p) {
     return (d.name===p.source.name) || (d.name===p.target.name)
    });

}


});
<\script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

marker要素にmarkerUnits=userSpaceOnUseを追加し, マーカー図形が線の太さに依存しないようにします

svg.append('svg:defs').append('svg:marker')
.attr('id', 'end-arrow')
.attr('viewBox', '-10 -10 15 20')
.attr('refX', 12)
.attr('markerWidth', 90)
.attr('markerHeight', 60)
.attr('markerUnits', 'userSpaceOnUse')
.attr('orient', 'auto') //矢印の向き
.append('svg:path')
.attr('d', 'M-10,-5L0,0L-10,5')
.attr('fill', 'red');

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/08 15:18

    ありがとうございます。
    プログラムに追加してみると,綺麗に描画できることができました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる