d3.jsノードの不透明度を変更し、フィルタに基づいて発信リンクと受信リンクを変更します

Question

私は完全に有効な有向グラフを持っています。

ラジオボタンを追加しようとしていますが、ラジオボタンをクリックすると、条件に基づいてノードの不透明度が動的に変更されます。

HTML

<style> 
    .links line { 
    stroke: #999; 
    stroke-opacity: 0.6; 
    } 

    .nodes circle { 
    stroke: #fff; 
    stroke-width: 1.5px; 
    } 

    .nodes circle { 
    stroke: #fff; 
    stroke-width: 1.5px; 
    } 

    div.tooltip { 
    position: absolute; 
    background-color: white; 
    max-width: 200px; 
    height: auto; 
    padding: 1px; 
    border-style: solid; 
    border-radius: 4px; 
    border-width: 1px; 
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .5); 
    pointer-events: none; 
    } 

</style> 
<svg id="Network_graph" width="400" height="350"></svg> 
<div id="map"></div> 
<div id="legend"> 
    <h3>Filter</h3> 
    <div class="input-group" id="filters"> 
    <label> 
     <input type="radio" name="filter" value="All" checked="checked"> All</label> 
    <br /> 
    <label> 
     <label> 
     <input type="radio" name="filter" value="Agent"> Agent</label> 
     <br /> 
     <label> 
     <input type="radio" name="filter" value="Customer"> Customer</label> 
     <br /> 
     <label> 
     <input type="radio" name="filter" value="Phone"> Phone</label> 
     <br /> 
     <label> 
     <input type="radio" name="filter" value="ID_Card"> ID_Card </label> 

    </div> 
</div> 





</button> 

私のJSONデータは以下の形式は次のとおりです。

JSON

var IDData = JSON.stringify([ 
    ["node/105173", "node/38180995", "Agent", "Customer", "1379644.0", 1, 264, "1374903"], 
    ["node/1061", "node/21373542", "Agent", "Customer", "530848.0", 1, 3000, "529502"], 
    ["node/10750", "node/59648369", "Agent", "Customer", "1454228.0", 1, 120, "1454118"], 
    ["node/10750", "node/78569210", "Agent", "Customer", "1425251.0", 1, 234, "1421416"], 
    ["node/10750", "node/96726118", "Agent", "Customer", "1376239.0", 1, 434, "1376152"], 
    ["node/10946829", "node/11190", "Customer", "Agent", "1409620.0", 20, 3380, "1406665"], 
    ["node/10946829", "node/57774036", "Customer", "Customer", "1460029.0", 3, 960, "1459731"], 
    ["node/109947", "node/97911872", "Agent", "Customer", "1323025.0", 1, 600, "1315582"],..]) 

この機能を使用して、私は適切なフォーマットでこのJSONデータを変換しますグラフをレンダリングするには、

$(document).ready(function() { 

    console.log(IDData); 
    var galData = JSON.parse(IDData); 
    var startnodes = []; 
    var endnodes = []; 
    var startnodetype = []; 
    var endnodetype = []; 
    var PayTime = []; 
    var TXN_COUNT = []; 
    var Total_Amt = []; 
    var SendTime = []; 
    galData.map(function(e, i) { 
     startnodes.push(e[0]); 
     endnodes.push(e[1]); 
     startnodetype.push(e[2]); 
     endnodetype.push(e[3]); 
     PayTime.push(e[4]); 
     TXN_COUNT.push(e[5]); 
     Total_Amt.push(e[6]); 
     SendTime.push(e[7]); 
    }); 
    var final_data = createNodes(startnodes, endnodes, startnodetype, endnodetype, depth, PayTime, TXN_COUNT, Total_Amt, SendTime); 
    makeGraph("#Network_graph", final_data); 

}); 

作業JsFiddleがここにあります。これはこの例のd3.js libraryからインスピレーションを受けています。

私のグラフには4種類のノードがあります。エージェント、顧客、電話番号、ID_Card。これらは以下のように表されます

d.type 

選択されているラジオボタンに基づいてグラフをフィルタリングする必要があります。たとえば、値「エージェント」を持つラジオボタンを選択すると、すべての「エージェント」ノードから発信および着信しているリンクを除いて、 。

d3.selectAll("input[name=filter]").on("change", function(d){ 


     var value = this.value; 

     node.style("opacity", 1); 
     link.style("opacity", 1); 


     if (value !== "all"){ 
     value = +this.value; 
     node.filter(function(d){ 
      return d.type != value; 
     }) 
     .style("opacity", "0.5"); 

     link.filter(function(d){ 
      return d.source.type != value || 
       d.target.type != value; 
     }) 
     .style("opacity", "0.5"); 
     } 



    }); 

まだ不足しているように見えますが、これを実行すると不透明度が変わることはありません。私は非常にjavascrptとd3.jsに新しいと専門知識が不足しています。だから、いくつかの助けを探しています。

Answer 1

ここには2つの問題があります。

問題1：対象範囲

あなたの "変更" 機能の中で、あなたはnodeとlinkへの参照を作っています。しかしnodeとlinkはmakeGraphの機能の中にしか存在しません。

解決策は、すべてのイベントハンドラをmakeGraph関数内に移動しています。

問題2：型変換

あなたがこれを行う：

value = +this.value; 

あなたは数には数字を持っていない文字列を変換しようとしています。したがって：

console.log(+this.value);//returns NaN 

あなたはNaNで何もしていません。

解決方法：文字列を保持します。ここで

あなたの更新フィドルさ：https://jsfiddle.net/u9y4m32k/