Question

我缺少什么？
我允许用户删除并绘制自己的数据点。用这个绘制我的线路径，它工作正常。

 let self = this;
        let line = D3['line']()
            .x(function (d) { return self.getColX(d.x); })
            .y(function (d) { return self.getRowY(d.y); });
        this.group = this.canvas.append("g")
            .attr("transform", "translate(25,25)");

        //bind the data
        this.group.selectAll("path")
            .data(this.data[this.site].drawLine)
            .enter()
            .append("path")
            .attr("d", line)
            .attr("fill", "none")
            .attr("stroke", "black");

        this.group.selectAll('path').exit().remove()

我的问题是，如果我弹出最后一个坐标并添加一个新坐标，请调用绘图功能，新点将被正确添加，但旧点不会被删除。

例如：我的行从（x，y）:( 1,3）到（3,6）到（7,8），如果我删除（7,8）并用5,6替换它。我将看到从（3,6）到（5,6）的新行，但从（3,6）到（7,8）的行不再在数据数组中。

Answer 1

在D3将您的选择与提供的数据进行比较后，会创建enter()和exit()选项。所以他们可以在这些电话的回复中使用：

this.group.selectAll("path")
            .data(this.data[this.site].drawLine)

这就是附加新数据的原因，enter()工作得很好。

使用this.group.selectAll('path').exit().remove()您创建了一个新选择，但未将选择与任何数据进行比较，因此enter()和exit()选项无法使用。

长话短说，只需将.exit().remove()应用于您的初始选择即可。像这样：

    let update = this.group.selectAll("path")
        .data(this.data[this.site].drawLine)

    update.enter()
        .append("path")
        .attr("d", line)
        .attr("fill", "none")
        .attr("stroke", "black")

    update.exit()
        .remove()

D3js路径更新进入和退出

1 个答案: