score:2

Accepted answer

If you want to filter, do it on your update selection:

  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);

Here's a running example:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" 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>


Related Query