我正在尝试使用 d3
并遵循 this link 来处理可拖动的形状具体来说,还有其他一些,我能够得到这样的东西;
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 32;
var circles = d3.range(20).map(function() {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var color = d3.scaleOrdinal()
.range(d3.schemeCategory20);
var circleGroup = svg.selectAll('g')
.data(circles)
.enter().append('g')
.attr('transform',function(d) { return 'translate('+d.x+','+d.y+')'; })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
circleGroup.append("circle")
.attr("r", radius)
.style("fill", function(d, i) { return color(i); })
circleGroup.append("text")
.text(function(d,i) { return i; })
.style('text-anchor','middle')
.attr('y',4);
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
d3.select(this).attr("transform","translate("+(d.x = d3.event.x)+','+(d.y = d3.event.y)+')' );
}
function dragended(d) {
d3.select(this).classed("active", false);
}
.svgClass{
border:2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<svg width="500" height="300" class="svgClass"></svg>
但现在我想将这种拖动保持在 svg
边界内,但不知道我该怎么做?谁能帮我解决这个问题??
最佳答案
更新您的 dragged() 函数以在翻译效果中强制使用 max 和 min 授权值。
function dragged(d) {
const
xMax = width - radius,
yMax = height - radius
const x =
d3.event.x < radius ? radius
: d3.event.x > xMax ? xMax
: d3.event.x
const y =
d3.event.y < radius ? radius
: d3.event.y > yMax ? yMax
: d3.event.y
d3.select(this).attr("transform","translate("+(d.x = x)+','+(d.y = y)+')' );
}
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
radius = 32;
var circles = d3.range(20).map(function() {
return {
x: Math.round(Math.random() * (width - radius * 2) + radius),
y: Math.round(Math.random() * (height - radius * 2) + radius)
};
});
var color = d3.scaleOrdinal()
.range(d3.schemeCategory20);
var circleGroup = svg.selectAll('g')
.data(circles)
.enter().append('g')
.attr('transform',function(d) { return 'translate('+d.x+','+d.y+')'; })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
circleGroup.append("circle")
.attr("r", radius)
.style("fill", function(d, i) { return color(i); })
circleGroup.append("text")
.text(function(d,i) { return i; })
.style('text-anchor','middle')
.attr('y',4);
function dragstarted(d) {
d3.select(this).raise().classed("active", true);
}
function dragged(d) {
const
xMax = width - radius,
yMax = height - radius
const x =
d3.event.x < radius ? radius
: d3.event.x > xMax ? xMax
: d3.event.x
const y =
d3.event.y < radius ? radius
: d3.event.y > yMax ? yMax
: d3.event.y
d3.select(this).attr("transform","translate("+(d.x = x)+','+(d.y = y)+')' );
}
function dragended(d) {
d3.select(this).classed("active", false);
}
.svgClass{
border:2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js"></script>
<svg width="500" height="300" class="svgClass"></svg>
关于javascript - 保持在形状 D3 内拖动 - ReactJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57919078/