D3标签到可拖动的圆圈
D3 Label to draggable circle
我试图使用d3来绘制圆形元素与标签旁边。我应该可以拖动一个圆圈,旁边有一个标签。
任何建议都是感激的。https://jsfiddle.net/o3yg8sq1/2/
const svg = d3.select('svg'),
width = +svg.attr('width'),
height = +svg.attr('height');
const node = svg.append('g')
.attr('class', 'nodes')
.selectAll('circle')
.data([{1:1},{2:2}])
.enter().append('circle')
.attr('r', 15)
.attr('cx', function (d, i) { return Math.random() * 100; })
.attr('cy', function (d, i) { return Math.random() * 100; })
.call(d3.drag()
.on('drag', dragmove));
svg.selectAll('.nodes')
.append('text')
.text(function(d){return 'test';})
function dragmove(d) {
d3.select(this).attr('cx', d3.event.x);
d3.select(this).attr('cy', d3.event.y);
}
因为这是D3 v3,所以正确的函数是:
d3.behavior.drag()
除此之外,要拖动带有相应文本的圆圈,更好的方法是将circle
和text
附加到一个组中:
const node = svg.selectAll('.g')
.data([{1:1},{2:2}])
.enter().append('g').attr("transform", function(){
return "translate(" + Math.random() * 100 + ","
+ Math.random() * 100 + ")"
});
node.append("circle").attr('r', 15);
node.append('text')
.attr("dx", 16)
.text("test")
并将其拖动到该组:
node.call(d3.behavior.drag()
.on('drag', dragmove));
function dragmove(d) {
d3.select(this).attr("transform", function(){
return "translate(" + d3.event.x + "," + d3.event.y + ")"
})
}
这是更新后的小提琴:https://jsfiddle.net/gerardofurtado/o3yg8sq1/4/
相关文章:
- 调整窗口大小时,可拖动的对象会出现在容器外部
- 删除对HTML元素的拖动
- jQuery UI可排序-多连接列表拖动
- 禁用SVG拖动
- 旋转后拖动对象
- JQuery UI可拖动潜水与滚动棒到鼠标
- jsPlumb-拖动克隆而不进行复制
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 如何使元素在可拖动元素内可单击
- 如何在使用Kinetic拖动同一对象后,在旋转动画中保持先前的偏移
- 在d3中拖动一条线
- 使元素在iframe中可拖动
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- 如何使所有绘制的(矩形、圆形、直线、多边形)都可拖动?纯JS
- 在图像上拖动鼠标时隐藏/显示标签
- D3标签到可拖动的圆圈
- 用foreignObject在d3js强制布局中制作可满足内容的标签,并拖动到Chrome上
- 通过拖动标签将文本从标签复制到特定的段落点击点
- 将图像标签拖动到svg的组标签中
- 如何制作该标签的另一个图像(通过拖动),而不影响原始图像