我有組元素,它有圓形和矩形元素。用戶可以拖動組元素,因此矩形和圓形元素都會移動。它運行良好。但如果用戶單擊圓形元素,我需要防止拖動。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>
如果用戶在 d3.js 中單擊圓形,如何防止拖動?
不負相思意
2023-07-29 16:33:19