gpt4 book ai didi

javascript - 如何为 d3 JavaScript 库中的拖动行为设置 Origin (drag.origin)

转载 作者:可可西里 更新时间:2023-11-01 02:53:42 25 4
gpt4 key购买 nike

我正在尝试使用 d3 框架为由 HTML 文本和背景矩形组成的组实现拖动行为。我能够让它工作,虽然当没有设置 drag.origin 时,我可以看到由于鼠标位置/元素坐标偏移而明显的跳跃。 d3 wiki-page 上的描述究竟如何虽然该页面描述了如何设置拖动的原点,但我没有正确理解我在示例中是如何实现它的。我尝试了两种不同的方法:使用元素将元素组合在一起并定义新元素。在第一种情况下,我必须使用翻译功能,我什至不知道如何获取组的坐标。

var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);

var group = svg.append("svg:g")
.attr("transform", "translate(10, 10)")
.attr("id", "group");

var rect1 = group.append("svg:rect")
.attr("rx", 6)
.attr("ry", 6)
.attr("x", 5/2)
.attr("y", 5/2)
.attr("id", "rect")
.attr("width", 250)
.attr("height", 125)
.style("fill", 'white')
.style("stroke", d3.scale.category20c())
.style('stroke-width', 5);


var html1 = group.append("foreignObject")
.attr("x", 50)
.attr("y", 25)
.attr("width", 200)
.attr("height", 100)
.attr("id", "fobject")
.style("border-color", d3.scale.category20c())
.append("xhtml:div")
.style("font", "14px 'Helvetica Neue'")
.html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");

var innerSvg = svg.append("svg")
.attr("x", 500)
.attr("y", 10)
.attr("id", "innerSvg");

var rect2 = innerSvg.append("svg:rect")
.attr("rx", 6)
.attr("ry", 6)
.attr("x", 5/2)
.attr("y", 5/2)
.attr("id", "rect")
.attr("width", 250)
.attr("height", 125)
.style("fill", 'white')
.style("stroke", d3.scale.category20c())
.style('stroke-width', 5);

var html2 = innerSvg.append("foreignObject")
.attr("x", 50)
.attr("y", 25)
.attr("width", 200)
.attr("height", 100)
.attr("id", "fobject")
.style("border-color", d3.scale.category20c())
.append("xhtml:div")
.style("font", "14px 'Helvetica Neue'")
.html("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu enim quam.");

var drag1 = d3.behavior.drag()
.on("drag", function(d,i) {
d3.select(this).attr("transform", function(d,i){
return "translate(" + [ d3.event.x,d3.event.y ] + ")"
})
});

var drag2 = d3.behavior.drag()
.on("drag", function(d,i) {
d3.select(this)
.attr("x", d3.event.x)
.attr("y", d3.event.y);
});

group.call(drag1);
innerSvg.call(drag2);

我将不胜感激任何解释,自然我在这里准备了一个工作示例:http://jsfiddle.net/Y8y7V/

最佳答案

您只需相应地设置origin() 函数。在第二种情况下,这很简单,在第一种情况下,有些困难,因为您既使用坐标又使用变换。基本模式(对于第二种情况)如下所示:

 .origin(function() { 
var t = d3.select(this);
return {x: t.attr("x"), y: t.attr("y")};
})

已更新 jsfiddle here .

关于javascript - 如何为 d3 JavaScript 库中的拖动行为设置 Origin (drag.origin),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15966256/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com