D3.js在rect click上删除数据

有了很多，我可以点击矩形删除它们

但是我怎样才能删除数据呢？目前存在一些奇怪的行为，例如以前删除的矩形重新出现，并且创建的矩形与单击的位置不同。我认为所有这些都是由于数据没有被删除

我想也许.exit（）可以工作，但实际上不行

这里有一个工作片段

.主动{
行程：#000；
笔画宽度：2px；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
半径=32；
风险值数据=[{
x:100，
y:200
},
{
x:200，
y:300
},
{
x:300，
y:200
},
{
x:400，
y:300
}
];
var xScale=d3.scaleLinear（）
.domain（[0，d3.max（数据，函数（d））{
返回d.x_位置
})]).范围（[0，宽度]）；
svg.append（“rect”）
.attr（“x”，100）
.attr（“y”，250）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“高度”，6）
.attr（“宽度”，800）
.样式（“填充”、“灰色”）；
svg.append（“rect”）
.attr（“x”，102）
.attr（“y”，252）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“高度”，2）
.attr（“宽度”，796）
.样式（“填充”、“黑色”）；
svg.selectAll（“rect”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，200）
.attr（“高度”，100）
.attr（“宽度”，15）
.样式（“填充”、“浅蓝色”）
.attr（'id'，函数（d，i）{
返回'rect_'+i；
})
.attr（“rx”，6）
.attr（“ry”，6）
.attr（“笔划宽度”，2）
.attr（“笔划”、“黑色”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））
。打开（“单击”，删除）；
打开（“单击”，函数（）{
var coords=d3.鼠标（此）；
var newData={
x:d3.event.x，
y:d3。事件。y
};
data.push（newData）；
svg.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，200）
.attr（“高度”，100）
.attr（“宽度”，15）
.样式（“填充”、“钢蓝”）
.attr（'id'，函数（d，i）{
返回“圆圈”+i；
})
.attr（“rx”，6）
.attr（“ry”，6）
.attr（“笔划宽度”，2）
.attr（“笔划”、“黑色”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））
。打开（“单击”，删除）；
})
函数dragstarted（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
}
函数（d）{
d3.选择（本）
.attr（“x”，d.x=d3.event.x）
//.attr（“cy”，d.y=d3.event.y）；
}
函数d（d）{
d3.选择（本）
.分类（“活动”，虚假）；
}
函数删除（d）{
d3.event.stopPropagation（）；
d3.选择（本）
.remove（）；
}

首先，您的数据数组有4个元素，但只附加了2个矩形。发生这种情况的原因是您正在选择SVG中以前存在的矩形。因此，不是：

svg.selectAll("rect")
    .data(data)
    .enter().append("rect")

应该是：

svg.selectAll(null)
    .data(data)
    .enter().append("rect")

回到你的问题：

D3有基于数据操作元素的方法，但没有基于元素操作数据的方法

因此，您必须自己更改数据数组。例如，在

removelement

内部：

function removeElement(d) {
    data = data.filter(function(e){
        return e != d;
    });
};

以下是您的代码和这些更改：

.主动{
行程：#000；
笔画宽度：2px；
}
var svg=d3。选择（“svg”），
宽度=+svg.attr（“宽度”），
高度=+svg.attr（“高度”），
半径=32；
风险值数据=[{
x:100，
y:200
},
{
x:200，
y:300
},
{
x:300，
y:200
},
{
x:400，
y:300
}
];
var xScale=d3.scaleLinear（）
.domain（[0，d3.max（数据，函数（d））{
返回d.x_位置
})]).范围（[0，宽度]）；
svg.append（“rect”）
.attr（“x”，100）
.attr（“y”，250）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“高度”，6）
.attr（“宽度”，800）
.样式（“填充”、“灰色”）；
svg.append（“rect”）
.attr（“x”，102）
.attr（“y”，252）
.attr（“rx”，2）
.attr（“ry”，2）
.attr（“高度”，2）
.attr（“宽度”，796）
.样式（“填充”、“黑色”）；
svg.selectAll（空）
.数据（数据）
.enter（）.append（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，200）
.attr（“高度”，100）
.attr（“宽度”，15）
.样式（“填充”、“浅蓝色”）
.attr（'id'，函数（d，i）{
返回'rect_'+i；
})
.attr（“rx”，6）
.attr（“ry”，6）
.attr（“笔划宽度”，2）
.attr（“笔划”、“黑色”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））
。打开（“单击”，删除）；
打开（“单击”，函数（）{
var coords=d3.鼠标（此）；
var newData={
x:d3.event.x，
y:d3。事件。y
};
data.push（newData）；
svg.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，函数（d）{
返回d.x；
})
.attr（“y”，200）
.attr（“高度”，100）
.attr（“宽度”，15）
.样式（“填充”、“钢蓝”）
.attr（'id'，函数（d，i）{
返回“圆圈”+i；
})
.attr（“rx”，6）
.attr（“ry”，6）
.attr（“笔划宽度”，2）
.attr（“笔划”、“黑色”）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.on（“结束”，绘图））
。打开（“单击”，删除）；
})
函数dragstarted（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
}
函数（d）{
d3.选择（本）
.attr（“x”，d.x=d3.event.x）
//.attr（“cy”，d.y=d3.event.y）；
}
函数d（d）{
d3.选择（本）
.分类（“活动”，虚假）；
}
函数删除（d）{
d3.event.stopPropagation（）；
data=data.filter（函数（e）{
返回e！=d；
});
D