如果用户在 d3.js 中单击圆形，如何防止拖动？

Question

我有组元素，它有圆形和矩形元素。用户可以拖动组元素，因此矩形和圆形元素都会移动。它运行良好。但如果用户单击圆形元素，我需要防止拖动。JS小提琴

const x = 100;

var y = 100;

var grid = d3.select("#svg-area");

var g = grid.append("g")

  .attr("transform", `translate(${x},${y})`)

  .call(d3.drag()

    .on("drag", function() {

      var x1 = d3.event.x - 30;

      var y1 = d3.event.y - 10;

      d3.select(this).attr("transform", "translate(" +

        (x1) + "," + (y1) + ")")

    }));

newNode(g);

function newNode(g, text) {

  var textWid = 100;

  console.log('wid ', textWid);

  g.append("rect")

    .attr("class", "new-nodes")

    .attr("x", '10')

    .attr("y", '0')

    .attr("rx", '6')

    .attr("ry", '6')

    .attr("width", textWid)

    .attr("height", '35')

    .style("fill", "#8c259f")

    .style("stroke", "#222")

    .style("cursor", "move");

  g.append("circle")

    .attr("class", "new-nodes")

    .attr("cx", '10')

    .attr("cy", '17')

    .attr("r", '6')

    .style("fill", "#dedede")

    .style("stroke", "#b2b0b0")

    .style("cursor", "pointer")

    .on("click", function(d) {

      /*             d3.event.preventDefault();

                  d3.event.stopPropagation();

                   */

    });

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

<svg id="svg-area" class="chart-area" width="500" height="500" pointer-events="all" style="cursor: crosshair; touch-action: none;">

</svg>

Answer 1

最简单的方法（最接近您的代码的方法）是更改on("click"为on("mousedown". 当再次释放鼠标按钮时，将注册“单击”事件。在此之前，明确注册了“mousedown”事件。mousedown 事件是触发“dragstart”的事件。const x = 100;var y = 100;var grid = d3.select("#svg-area");var g = grid.append("g")  .attr("transform", `translate(${x},${y})`)  .call(d3.drag()    .on("drag", function() {      var x1 = d3.event.x - 30;      var y1 = d3.event.y - 10;      d3.select(this).attr("transform", "translate(" +        (x1) + "," + (y1) + ")")    }));newNode(g);function newNode(g, text) {  var textWid = 100;  console.log('wid ', textWid);  g.append("rect")    .attr("class", "new-nodes")    .attr("x", '10')    .attr("y", '0')    .attr("rx", '6')    .attr("ry", '6')    .attr("width", textWid)    .attr("height", '35')    .style("fill", "#8c259f")    .style("stroke", "#222")    .style("cursor", "move");  g.append("circle")    .attr("class", "new-nodes")    .attr("cx", '10')    .attr("cy", '17')    .attr("r", '6')    .style("fill", "#dedede")    .style("stroke", "#b2b0b0")    .style("cursor", "pointer")    .on("mousedown", function(d) {      d3.event.preventDefault();      d3.event.stopPropagation();    });}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script><svg id="svg-area" class="chart-area" width="500" height="500" pointer-events="all" style="cursor: crosshair; touch-action: none;"></svg>或者，您可以将事件移动到矩形并使用d3.drag().container. 通常，d3.drag计算事件和父元素之间的距离。现在，我们需要祖父母，因为父母（元素g）是我们想要拖动的东西。我还更改了g元素以使用基准对象，以便您可以更轻松地移动它。var grid = d3.select("#svg-area");var g = grid.append("g")  .datum({    x: 100,    y: 100  })  .attr("transform", function(d) {    return `translate(${d.x},${d.y})`;  });newNode(g);function newNode(g, text) {  var textWid = 100;  console.log('wid ', textWid);  g.append("rect")    .attr("class", "new-nodes")    .attr("x", '10')    .attr("y", '0')    .attr("rx", '6')    .attr("ry", '6')    .attr("width", textWid)    .attr("height", '35')    .style("fill", "#8c259f")    .style("stroke", "#222")    .style("cursor", "move")    .call(d3.drag()      .container(grid.node())      .on("drag", function() {        d3.select(this.parentNode)          .attr("transform", function(d) {            d.x += d3.event.dx;            d.y += d3.event.dy;            return `translate(${d.x},${d.y})`;          });      }));  g.append("circle")    .attr("class", "new-nodes")    .attr("cx", '10')    .attr("cy", '17')    .attr("r", '6')    .style("fill", "#dedede")    .style("stroke", "#b2b0b0")    .style("cursor", "pointer");}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script><svg id="svg-area" class="chart-area" width="500" height="500" pointer-events="all" style="cursor: crosshair; touch-action: none;"></svg>