Javascript 防止svg组重叠（D3 js v4）

当我拖动svg的“g”元素以切换/更改其位置时，如何防止svg的“g”元素与其他“g”元素重叠。 下面是代码的链接

---

你的问题不太清楚。我假设通过防止svg的“g”元素重叠，您希望在释放其中一个组时重新排列这些组

在这种情况下，您可以在

dragended

函数中获取所有

元素，对它们进行排序，并根据它们的索引进行转换：

function dragended(d) {
    d3.select(this).classed("active", false);
    var theseGroups = svg.selectAll(".groups").sort(function(a, b) {
        return d3.ascending(a.y, b.y);
    });
    theseGroups.attr("transform", function(d, i) {
        return "translate(" + margin.left / 2 + "," + (d.y = barHeight * i) + ")";
    })
}

下面是一个演示：

var保证金={
前10名，
右:10,，
底数：30，
左：10
},
宽度=500-边距。左侧-边距。右侧，
高度=500-页边距.顶部-页边距.底部
距离=0，杆高=75，i=0；
函数yAxis（）{
如果（i==0）{
i++；
返回2；
}否则{
距离=parseInt（barHeight）*i；
i++；
返回距离；
}
}
var矩形=d3.range（5.map）（函数（）{
返回{
x:5，
y:Math.round（yAxis（））
};
});
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
var group=svg.selectAll（'g'）
.数据（矩形）
.enter（）.append（“g”）
.attr（“类”、“组”）
.attr（“转换”，函数（d）{
返回“translate（“+d.x+”，“+d.y+”）
})
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
组。追加（“rect”）
.attr（“高度”，60）
.attr（“宽度”，300）
.样式（“填充”，功能（d，i）{
返回颜色（i）；
});
组。追加（“文本”）
.attr（“文本锚定”、“开始”）
.样式（“填充”、“钢蓝”）
.文本（“结束”）；
函数dragstarted（d）{
d3.选择（this）.raise（）.classed（“活动”，true）；
}
函数（d）{
d3.选择（this.attr）（“transform”，“translate”（+margin.left/2+），“+（d.y=d3.event.y）+”）；
}
函数d（d）{
d3.选择（此）.classed（“活动”，false）；
var theseGroups=svg.selectAll（“.groups”）.sort（函数（a，b）{
返回d3.升序（a.y，b.y）；
});
这些组。属性（“转换”，函数（d，i）{
返回“translate（“+margin.left/2+”，“+（d.y=barHeight*i）+”）；
})
}

svg{
边框：1px实心#000；
}

---

当矩形的高度不同时，您能帮我给出矩形之间的适当间距吗。如果您有其他问题，请发布另一个问题。

function dragended(d) {
    d3.select(this).classed("active", false);
    var theseGroups = svg.selectAll(".groups").sort(function(a, b) {
        return d3.ascending(a.y, b.y);
    });
    theseGroups.attr("transform", function(d, i) {
        return "translate(" + margin.left / 2 + "," + (d.y = barHeight * i) + ")";
    })
}