根据迈克的示例,我试图找出如何将概念转移到分组元素。我可以单独创建启动拖动和单击,但在一起时我似乎无法单击来工作。下面是一个片段 - 这只是我使用过的许多方法之一。
const width = 400;
const height = 300;
const radius = 5;
const svg = d3.select("#chart").append('svg')
.attr('width', '400')
.attr('height', '400')
.style('border', 'solid 1px');
const circles = d3.range(20).map(i => ({
x: Math.random() * (width - radius * 2) + radius,
y: Math.random() * (height - radius * 2) + radius,
index: i
}));
const group = svg.selectAll("g").data(circles).enter()
.append("g")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
group.append("circle")
.attr("cx", d …Run Code Online (Sandbox Code Playgroud)