d3可拖动svg路径线段

可可

我的任务是使用d3在mousedown上绘制svg形状。我一直在尝试找出如何使其可拖动。我将svg排成一行(请参阅此处),但实际上我需要使用路径。我已经很近了,但是我很困惑。有人可以帮我吗?这是一些代码,是我的小提琴。

var drag = d3.behavior.drag().on('drag', dragmove);
function dragmove() {
    isDown = false;
    m3 = d3.mouse(this);
    var newArray = [ {x: (m1[0] + d3.event.dx), y: (m1[1] + d3.event.dy)},
                     {x: (m2[0] + d3.event.dx), y: (m2[1] + d3.event.dy)} ]; 
    line.attr('d', lineFunction(newArray));    
}

按下鼠标

pathArray = [ {'x': m1[0], 'y': m1[1]}, {'x': m1[0], 'y': m1[1]} ];
    line = svg.append('path')
        .attr('d', lineFunction(pathArray))
        .attr({'stroke': 'purple', 'stroke-width': 5, 'fill': 'none'})
        .call(drag);

鼠标移动

m2 = d3.mouse(this);
    pathArray[1] = {'x': m2[0], 'y': m2[1]};
    line.attr('d', lineFunction(pathArray));
可可

好吧,我超级亲密。这就是我在dragmove中所做的更改。现在效果很好。

var newArray = [ {x: (m1[0] += d3.event.dx), y: (m1[1] += d3.event.dy)},
                 {x: (m2[0] += d3.event.dx), y: (m2[1] += d3.event.dy)} ]; 

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

d3从数组创建SVG路径

来自分类Dev

d3从JSON路径创建svg

来自分类Dev

d3从数组创建SVG路径

来自分类Dev

D3 svg 路径重叠

来自分类Dev

使用D3制作水平可拖动图形

来自分类Dev

javascript - 获取可拖动箭头 D3 的角度值

来自分类Dev

带有可拖动节点的 D3 布局

来自分类Dev

设置可拖动线段的限制

来自分类Dev

d3上的多个拖动功能可强制拖动布局

来自分类Dev

向d3拖动行为添加参数后,元素不再可拖动

来自分类Dev

如何获得SVG路径形状以缩放D3?

来自分类Dev

在d3中访问SVG路径长度

来自分类Dev

更新 svg 和 d3 中的路径样式

来自分类Dev

在d3力布局中保持节点可拖动的同时实现平移

来自分类Dev

d3 使用 SVG 轴和画布图表进行缩放和拖动

来自分类Dev

如何单击以添加或拖动D3?

来自分类Dev

D3力垂直反向拖动

来自分类Dev

d3拖动事件导致TypeError

来自分类Dev

D3折线图曲线段

来自分类Dev

当应用蒙版时,由d3(d3.svg.arc)创建的SVG路径元素消失

来自分类Dev

当应用蒙版时,由d3(d3.svg.arc)创建的SVG路径元素消失

来自分类Dev

SVG中的路径位于D3图表中圆圈的前面,尽管有附加顺序

来自分类Dev

将边框添加到SVG路径d3 JavaScript

来自分类Dev

如何选择具有特定ID的d3 svg路径

来自分类Dev

缩放到使用D3外部加载SVG边界路径箱

来自分类Dev

d3 JavaScript,获取svg路径中两点之间的距离

来自分类Dev

如何在SVG中为D3画笔创建路径

来自分类Dev

检查路径是否在带有d3的svg中具有标题

来自分类Dev

将多条路径合并到一个D3(SVG)中