Question

我有一组节点数据

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

我希望能够在数据更新时执行以下所有操作：

添加输入节点
使现有节点以转换
隐藏退出节点（不透明度0），因为它们可能会重新出现
当节点将其“muteText”属性更改为true时，使内部文本消失

我很满意3个第一要求但我真的不知道如何做最后一个：如何根据过滤的数据集删除（甚至更改）子元素？我可以使用d3.data函数中的过滤器来执行此操作吗？

如果我的问题不清楚，请告诉我。

Answer 1

如果要过滤，请在更新选择中执行此操作：

var React = require('react');
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';

// TODO add uuid for mapping

var Result = React.createClass({
  render: function() {
    var {id, name} = this.props;
    return (
      <div className="row" onClick={() =>{
          this.props.onToggle(id)
        }}>
        <Card
          style={{
            padding: '15px',
            margin:   '5px'
          }}>
          <h2>{name}</h2>
        </Card>
      </div>
    );
  }
});

module.exports = Result;

这是一个正在运行的例子：

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

使用动画删除子选择

1 个答案: