サブ選択削除は

私はサブ選択削除は

var dataNodes = [ 
    { id: 1, x: 10, y:30, text: "node 1", muteText: false }, 
    { id: 2, x: 30, y:50, text: "node 2", muteText: false }, 
    { id: 3, x: 50, y:70, text: "node 3", muteText: false } 
];

私は（あるため、ビジネスの複雑さの多くではない、私の実際のコード）このような機能を使用してDOMの要素を追加したノードのデータのセットを持っています。

function redraw(newData) { 
    var node = d3 
     .select("body") 
     .selectAll("g.node") 
     .data(dataNodes) 
     .transition().duration(500) 
     .attr("transform", d => "translate(" + d.x + "," + d.y + ")"); 

    node.enter() 
     .append("g") 
     .attr("class", "node") 
     .attr("transform", d => "translate(" + d.x + "," + d.y + ")") 
     .append("text") 
     .text(d => d.text) 
     .style("opacity", "0") 
     .transition().duration(500) 
     .style("opacity", "1"); 

    node.exit() 
     .style("opacity", "0"); 
}

私は、データが更新されます時に、次のすべての操作を行うことができるようにしたい：

は、ノード
を再び現れることがあるので、内側のテキストdisapear

を作る移行

非表示exitingsノード（不透明度0）に移動し

メイク私は最初の3つの必要条件にかなり甘いですが、最後のやり方は本当に分かりません。フィルタリングされたデータセットに基づいてどのようにサブ要素を削除（または変更）できますか？ d3.data関数のフィルタを使用してそれを行うことはできますか？

質問が不明な場合は教えてください。

出典

2016-11-23 Simon Budin

あなたがフィルタリングする場合は、あなたの更新の選択にそれを行う：

var node = svg 
    .selectAll("g.node") 
    .data(someData); 

    var nodeE = node.enter() 
    .append("g") 
    .attr("class", "node"); 

    nodeE.append("text") 
    .text(d => d.text); 

    // node is now UPDATE + ENTER 
    node = nodeE.merge(node); 

    // filter the text and set how you care 
    node.filter(function(d) { 
     return d.muteText 
    }) 
    .select("text") 
    .style("opacity", 1) 
    .transition() 
    .style("opacity", 0); 

    node.filter(function(d) { 
     return !d.muteText 
    }) 
    .select("text") 
    .style("opacity", 0) 
    .transition() 
    .style("opacity", 1);

は、ここで実行している例です：あなたの応答のための

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script> 
 
    <style> 
 
    text { 
 
     fill: black; 
 
     font-family: arial; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var dataNodes = [{ 
 
     id: 1, 
 
     x: 10, 
 
     y: 30, 
 
     text: "node 1", 
 
     muteText: false 
 
    }, { 
 
     id: 2, 
 
     x: 30, 
 
     y: 50, 
 
     text: "node 2", 
 
     muteText: false 
 
    }, { 
 
     id: 3, 
 
     x: 50, 
 
     y: 70, 
 
     text: "node 3", 
 
     muteText: false 
 
    }]; 
 

 
    var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 500) 
 
     .attr('height', 500); 
 

 
    redraw([{ 
 
     id: 1, 
 
     x: 10, 
 
     y: 30, 
 
     text: "node 1", 
 
     muteText: false 
 
     }, { 
 
     id: 2, 
 
     x: 30, 
 
     y: 50, 
 
     text: "node 2", 
 
     muteText: false 
 
     }, { 
 
     id: 3, 
 
     x: 50, 
 
     y: 70, 
 
     text: "node 3", 
 
     muteText: false 
 
     }]); 
 
    
 
    setTimeout(function() { 
 
     redraw([{ 
 
     id: 1, 
 
     x: 10, 
 
     y: 30, 
 
     text: "node 1", 
 
     muteText: true 
 
     }, { 
 
     id: 2, 
 
     x: 100, 
 
     y: 50, 
 
     text: "node 2", 
 
     muteText: false 
 
     }, { 
 
     id: 3, 
 
     x: 50, 
 
     y: 70, 
 
     text: "node 3", 
 
     muteText: true 
 
     }]) 
 
    }, 2000) 
 
    
 
    setTimeout(function() { 
 
     redraw([{ 
 
     id: 1, 
 
     x: 10, 
 
     y: 30, 
 
     text: "node 1", 
 
     muteText: true 
 
     }, { 
 
     id: 2, 
 
     x: 100, 
 
     y: 50, 
 
     text: "node 2", 
 
     muteText: false 
 
     }, { 
 
     id: 3, 
 
     x: 50, 
 
     y: 70, 
 
     text: "node 3", 
 
     muteText: false 
 
     },{ 
 
     id: 4, 
 
     x: 60, 
 
     y: 90, 
 
     text: "node 4", 
 
     muteText: false 
 
     }]) 
 
    }, 4000) 
 

 
    function redraw(someData) { 
 

 
     var node = svg 
 
     .selectAll("g.node") 
 
     .data(someData); 
 

 
     var nodeE = node.enter() 
 
     .append("g") 
 
     .attr("class", "node") 
 
     .attr("transform", d => "translate(" + d.x + "," + d.y + ")"); 
 

 
     nodeE.append("text") 
 
     .text(d => d.text) 
 
     .style("opacity", 0) 
 
     .transition() 
 
     .style("opacity", 1); 
 

 
     node = nodeE.merge(node); 
 

 
     node.exit() 
 
     .style("opacity", "0"); 
 

 
     node.transition().duration(500) 
 
     .attr("transform", d => "translate(" + d.x + "," + d.y + ")"); 
 

 
     node.filter(function(d) { 
 
      return d.muteText 
 
     }) 
 
     .select("text") 
 
     .transition() 
 
     .style("opacity", 0);  
 

 
    } 
 
    </script> 
 
</body> 
 

 
</html>

出典

2016-11-23 21:45:30 Mark

ありがとう！入力ノードをフェードインさせることができ、既存のノードを翻訳することができるかどうか知っていますか？私の場合、トランジションが衝突するようです。また、あなたのコードに似たコードで "nodeE.mergeが関数ではありません"というエラーが出る理由を知っていますか？ –

@SimonBudin、更新された回答を参照してください。 'nodeE.merge is not a function'と表示される理由はおそらくd3 ** version 3 **を使用しているからです。私の答えはd3 ** version 4 **です。 – Mark

私はその後、アップグレードを計画します！ありがとう！ –

答えて

関連する問題