0

我想删除我选择的一行。当我单击该行时，我会找到该行，我将使用我选择的内容删除相关数据。

所以我强制将数据放在'deleteLine'函数中，但总是删除第二行。即使我将第二行的数据放入数据中。

我想我不明白 d3 输入删除功能。请给点建议。

这是小提琴示例 https://jsfiddle.net/victoriaVvv/c2pybvmd/90/

class Hello extends React.Component {
constructor(props){
super(props)
this.drawLine = this.drawLine.bind(this)
this.deletLine = this.deleteLine.bind(this);
this.data = [
{ source : 'a', target:'b', x1 : 0, y1 : 0, x2 : 100, y2 : 100 },
{ source : 'c', target:'d', x1 : 100, y1 : 0, x2 : 200, y2 : 200 }
];

}
    componentDidMount(){
    //this.setSVG();

    this.deleteLine();

    const svg = d3.select('#svg').append('svg')

      .attr("width", '100%').attr("height", 500)
      .attr("style", 'background:#efefef').attr("id","abc");
       //const data = [{ source : 'a', target:'b', x1 : 0, y1 : 0, x2 : 100, y2 : 100 }];

      this.drawLine(this.data);
  }


  drawLine(data){



    const svg = d3.select("#abc");
    console.log(svg)
    const line = svg.selectAll('line').data(data);
            console.log(line)
        line.enter()
        .append('line')
        .attr('stroke', '#000')
        .attr('stroke-width', 3)
        .attr('x1', function(d) {return d.x1})
        .attr('y1', function(d) {return d.y1})
        .attr('x2', function(d) {return d.x2})
        .attr('y2', function(d) {return d.y2})
        //.merge(line)

        line.exit().remove();



  }
  deleteLine() {
    d3.select('body')
    .on('keydown', () => {
            if(d3.event.keyCode === 8){
            // TODO find selected line and will delete the line in the data. 
            // currently this data is hard coded
            this.data = [{ source : 'c', target:'d', x1 : 0, y1 : 0, x2 : 100, y2 : 100 }];
          console.log(2);
          this.drawLine(this.data);
        }

    })
  }

  render() {
    return <div>
      <div id='svg'></div>
    </div>
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);
4

1 回答 1

2

您缺少关键功能。没有按键功能，

data 中的第一个基准分配给第一个选定元素，第二个基准分配给第二个选定元素，依此类推。通过计算每个数据和元素的字符串标识符，可以指定一个键函数来控制将哪个数据分配给哪个元素，替换默认的按索引连接。

在您的情况下，最好的字符串是组合sourceand target：

const line = svg.selectAll('line').data(data, function(d){
    return d.source + d.target;
});

这是更新的 JSFiddle，只需按backspace：https ://jsfiddle.net/31vfwcjp/1/ 。顺便说一句，什么都不会改变，因为您的更新选择什么都不做。

于 2019-05-11T13:52:00.097 回答