javascript - D3 删除 dbclick 上的圆圈-6ren

javascript - D3 删除 dbclick 上的圆圈

转载作者：行者123 更新时间：2023-11-30 15:02:02

我正在使用 Bostock 的 Circle Dragging I和威尔的 D3 Mouse Event所以我可以点击 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 d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .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 d.x;
    })
    .attr("cy", function(d) {
      return d.y;
    })
    .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", d.x = d3.event.x)
    .attr("cy", d.y = 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>

最佳答案

您的代码将面临的最大问题是区分双击和单击。但是，由于您具体询问了如何删除圆圈，因此该答案将仅处理该问题。

您删除圆圈的代码有两个问题。

首先，这个...

.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 d.x;
  })
  .attr("cy", function(d) {
    return d.y;
  })
  .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", d.x = d3.event.x)
    .attr("cy", d.y = 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 上的点击。由于该问题(区分单击和双击)非常复杂，因此可能值得提出一个新的、单独的问题。

关于javascript - D3 删除 dbclick 上的圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46384860/

文章推荐： javascript - AJAX 加载不适用于脚本

文章推荐： c# - 显示用于调试 DLL 的控制台应用程序窗口

文章推荐： javascript - 在弹出窗口中显示组合 Canvas 图像

javascript - 结合点击和 dbclick
我应该如何将以下脚本组合成一个单一的工作脚本？当用户拾取的颜色出现时单击，再次单击颜色变为白色，双击时出现浅绿色。代码太长，我试着把它们组合起来，但我弄错了。 //single click $('#
javascript - D3 删除 dbclick 上的圆圈
我正在使用 Bostock 的 Circle Dragging I和威尔的 D3 Mouse Event所以我可以点击 svg 并创建一个圆圈，而且它们都是可拖动的。这是可行的，但如果我在创建圆圈时双
javascript - 停止主 dblclick 事件触发，以便仅触发子 dbclick
我有一个名为 mydiv 的 div，用作我的页面的容器...当有人双击时，我会执行一些操作。 $('#mydiv').dblclick(function(e) { // some stuff (
angularjs - 在 AngularJS 中为选择选项添加 ng-dbclick
我有一个标记并使用 ng-options绑定(bind) select 的选项.我的问题是如何添加 ng-dbclick select 的每个选项这是我的代码最佳答案我不认为你可以在 js
javascript - d3.js 通过 dbclick 事件打开新选项卡
我对 d3 还很陌生。我使用下面的代码根据 d3 网站中的示例对我的投资组合项目进行网络类型分析。现在我正在寻找一种在圆圈上添加双击事件的方法，该事件会打开一个新选项卡并转到相应的网址。我已经尝试过这
javascript - “dbclick”事件监听器不工作，但 'click' 正常
目前，我正在制作一个密码存储网站。用户界面的一部分是当您双击密码项目时，它会为您提供删除它的选项。这是我的事件监听器(带有函数)，myPasswordScreenID 是所有具有 passwordI
javascript - 使用 mouseup 事件和调用函数的 dbclick 事件选择文本
我寻找 jquery 选择文本事件，我找到了 this example .在此示例中，mouseup 事件和 dbclick 事件一样有效。我向这段代码添加了一个函数，它有返回值，但现在 dbcli
javascript - 如何在 jquery 中的 dbclick 上更改单选按钮的原始颜色
如果我点击单选按钮，颜色变为黄色，但如果我双击它，我想要它的原始颜色，即灰色。我应该怎么做？ JS $(document).ready(function() { $('input:radio'
javascript - dbclick 在 Raphael.js 中不起作用
我有以下 JS 代码片段(使用 Raphael 库)，但双击不起作用 - 谁能帮我弄清楚为什么？ var paper = new Raphael(document.getElementById('ca
javascript - 如果条件已验证，如何添加 ng-dbclick AngularJS？
如果只有一个条件为true，我想注入(inject)ng-dbclick: 谢谢。最佳答案你可以简单地这样做: ... 关于javascript - 如果条件已验证，如何添加 ng-dbclic
javascript - D3 : How do I set "click" event and "dbclick" event at the same time?
我已经将点击事件切换到一个节点，我还想将 dbclick 事件切换到它。但是，它只会在我点击它时触发点击事件。那么如何同时设置两个事件呢？最佳答案您必须进行“自己的”双击检测类似的东西可以工作

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - D3 删除 dbclick 上的圆圈