我使用博斯托克的圆形拖动我和威尔的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>