我需要在其中创建一个具有某些形状(如rect,circle,…)的d3组,并且它必须是可拖动的.拖动工作,但拖动开始时,形状是“跳跃”.我知道我需要像.attr(“x”,d.x = d3.event.x)这样的东西.但后来我得到一个错误,“d”未定义.我怎样才能修复“跳跃”?
这是一个非常简单的代码:
var svg = d3.select("body").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 600")
.attr("width", "100%")
.attr("height", "100%");
rectGroup();
function rectGroup() {
var group = svg.append('g')
.attr("class", "group")
.call(d3.drag()
.on("drag", dragged));
group.append("rect")
.data([{ x: 200, y: 200, width: 100 , height: 100}])
.attr('class', 'rect')
.attr("x", function(d) { return d.x; })
.attr('y', function(d) { return d.y; })
.attr('width', function(d) { return d.width; })
.attr('height', function(d) { return d.height; });
}
function dragged(d) {
d3.select(this).select("rect").attr("x", d3.event.x)
d3.select(this).select("rect").attr("y", d3.event.y)
}
最佳答案 你在调用群组上的拖累.但是,您在拖动的函数中使用矩形的x和y属性.
您必须决定调用哪一个,矩形或组,并且在此决定之后您必须相应地更改您的代码.
例如,如果要保持对组的拖动,则必须使用translate:
function dragged(d) {
d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) +
"," + (d.y = d3.event.y) + ")")
}
设置组的x和y数据后.
这是演示:
var svg = d3.select("body").append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 960 600")
.attr("width", "100%")
.attr("height", "100%");
rectGroup();
function rectGroup() {
var group = svg.append('g')
.datum({
x: 0,
y: 0
})
.attr("class", "group")
.call(d3.drag()
.on("drag", dragged));
group.append("rect")
.data([{
x: 200,
y: 200,
width: 100,
height: 100
}])
.attr('class', 'rect')
.attr("x", function(d) {
return d.x;
})
.attr('y', function(d) {
return d.y;
})
.attr('width', function(d) {
return d.width;
})
.attr('height', function(d) {
return d.height;
});
}
function dragged(d) {
d3.select(this).attr("transform", "translate(" + (d.x = d3.event.x) + "," + (d.y = d3.event.y) + ")")
}
<script src="https://d3js.org/d3.v4.min.js"></script>