D3去除dbclick圈(D3 remove circle on dbclick)

2019-09-28 18:48发布

我使用博斯托克的圆形拖动我和威尔的D3鼠标事件 ,所以我可以点击SVG,并创建一个圆,还他们都是可拖动。 这是工作,虽然有一个侧面的问题,如果我加倍有时创建一个圆圈拖动时圈使他们跳来跳去点击。

但主要的问题是,我想能够双击一个圆,有它消失,但也从数据中删除。

当圆圈绘制我添加了调用一个函数dbclick事件

  function removeElement(d) {
    // need to remove this object from data
    d3.select(this)
      .exit()
      .remove();
  }

创建一个新的圈子时,此功能也被称为。

此功能不删除圈,什么是做这种正确的方法是什么? 而且是有一个单一的点击做一两件事,并双击做别的事情之间的冲突?

 var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), radius = 32; var data = [{ x: 100, y: 200 }, { x: 200, y: 300 }, { x: 300, y: 200 }, { x: 400, y: 300 } ]; var xScale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d.x_pos })]).range([0, width]); svg.selectAll("circle") .data(data) .enter().append("circle") .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) .attr("r", radius) .style("fill", "lightblue") .attr('id', function(d, i) { return 'rect_' + i; }) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)) .on("dblclick", removeElement()); svg.on("click", function() { var coords = d3.mouse(this); var newData = { x: d3.event.x, y: d3.event.y }; data.push(newData); svg.selectAll("circle") // For new circle, go through the update process .data(data) .enter() .append("circle") .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) .attr("r", radius) .style("fill", "red") .attr('id', function(d, i) { return 'circle_' + i; }) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)) .on("dblclick", removeElement()); }) function dragstarted(d) { d3.select(this).raise().classed("active", true); } function dragged(d) { d3.select(this) .attr("cx", dx = d3.event.x) .attr("cy", dy = d3.event.y); } function dragended(d) { d3.select(this) .classed("active", false); } function removeElement(d) { // need to remove this object from data d3.select(this) .exit() .remove(); } 
 .active { stroke: #000; stroke-width: 2px; } 
 <!DOCTYPE html> <meta charset="utf-8"> <svg width="960" height="500"></svg> <script src="//d3js.org/d3.v4.min.js"></script> 

Answer 1:

你将与​​你的代码所面临的最大的问题是在告诉从双击点击。 但是,因为你明确地询问如何删除圈子,这个答案将只处理问题。

您去除界代码有两个问题。

首先,这...

.on("dblclick", removeElement())

...将调用removeElement立即返回它的值(其中,顺便说一句,是undefined )。 这是不是你想要的。

相反,这样做:

.on("dblclick", removeElement) 

这是相同的:

.on("dbclick", function(d){
    removeElement(d);
}

这样一来, removeElement只有当用户点击了一圈,没有立即将被调用。

第二个问题是这样的:

d3.select(this).exit().remove();

由于仍然存在与这个圈子相关的数据,你的“退出”的选择是空的。

取而代之的是,它应该是:

d3.select(this).remove();

下面是这些变化的代码:

 var svg = d3.select("svg"), width = +svg.attr("width"), height = +svg.attr("height"), radius = 32; var data = [{ x: 100, y: 200 }, { x: 200, y: 300 }, { x: 300, y: 200 }, { x: 400, y: 300 } ]; var xScale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d.x_pos })]).range([0, width]); svg.selectAll("circle") .data(data) .enter().append("circle") .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) .attr("r", radius) .style("fill", "lightblue") .attr('id', function(d, i) { return 'rect_' + i; }) .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)) .on("dblclick", removeElement); function dragstarted(d) { d3.select(this).raise().classed("active", true); } function dragged(d) { d3.select(this) .attr("cx", dx = d3.event.x) .attr("cy", dy = d3.event.y); } function dragended(d) { d3.select(this) .classed("active", false); } function removeElement(d) { // need to remove this object from data d3.select(this) .remove(); } 
 .active { stroke: #000; stroke-width: 2px; } 
 <!DOCTYPE html> <meta charset="utf-8"> <svg width="960" height="500"></svg> <script src="//d3js.org/d3.v4.min.js"></script> 

PS:我取消了对SVG的点击创建圈子。 由于这个问题(区别于双击点击)是非常复杂的,它可能是值得一个新的,分离的问题。



文章来源: D3 remove circle on dbclick