个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试在 android 上使用 d3.js 创建一个可视化(使用 apache cordova)，我在手机屏幕上显示一些元素(例如圆圈)并有可能在元素之间创建链接(例如线) .
它应该如何工作:
现在应该在两个元素之间形成一个新链接。我可以使用鼠标事件相对轻松地实现这一点，但我很难使用触摸支持实现同样的目标。
这是展示我面临的问题的最小示例。
var width = 350,
height = 600,
colors = d3.scale.category10();
var nodeData =
[
{ id: 1, x: 50, y: 50 },
{ id: 2, x: 200, y: 50 },
{ id: 3, x: 125, y: 150 }
];
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var node = svg.selectAll('g')
.data(nodeData)
.enter()
.append('g');
node.append('circle')
.attr('cx', function (d) { return d.x; })
.attr('cy', function (d) { return d.y; })
.attr('r', 30)
.attr('fill', 'red')
.on('touchstart', function (node) {
})
.on('touchend', function (node) {
});
node.append('text')
.attr('fill', 'white')
.attr('x', function (d) { return d.x; })
.attr('y', function (d) { return d.y; })
.text(function (d) { return d.id; });<script src="https://d3js.org/d3.v3.min.js"></script>在这个例子中，touchend 事件总是在与 touchstart 相同的元素上执行，我找不到一种方法来获取触摸顶部的元素操作已结束。
我刚开始使用 d3.js，所以非常感谢您的帮助。
干杯
最佳答案
您可以切换到使用命中(碰撞)检测:
svg.on('touchmove', function() {
var p = d3.touches(this)[0];
endNode = undefined;
cs.each(function(d) {
var self = d3.select(this),
x = d.x - p[0],
y = d.y - p[1],
l = Math.sqrt(x * x + y * y),
r = 30;
if (l < r) {
endNode = d;
}
});
});
如果移动事件“击中”一个圆，endNode 将被定义。
然后在您的 touchend 事件中，检查我们是否在一个圆圈上开始和停止:
svg.on('touchend', function(){
if (startNode && endNode){
svg.append("path")
.style("fill", "none")
.style("stroke", "black")
.attr("d", "M" + startNode.x + "," + startNode.y + "L" + endNode.x + "," + endNode.y);
}
startNode = undefined;
endNode = undefined;
});
运行代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
var width = 350,
height = 600;
//colors = d3.scale.category10();
var nodeData = [{
id: 1,
x: 50,
y: 50
}, {
id: 2,
x: 200,
y: 50
}, {
id: 3,
x: 125,
y: 150
}];
var startNode, endNode;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
svg.on('touchmove', function() {
var p = d3.touches(this)[0];
endNode = undefined;
cs.each(function(d) {
var self = d3.select(this),
x = d.x - p[0],
y = d.y - p[1],
l = Math.sqrt(x * x + y * y),
r = 30;
if (l < r) {
endNode = d;
}
});
});
svg.on('touchend', function(){
if (startNode && endNode){
svg.append("path")
.style("fill", "none")
.style("stroke", "black")
.attr("d", "M" + startNode.x + "," + startNode.y + "L" + endNode.x + "," + endNode.y);
}
startNode = undefined;
endNode = undefined;
cs.attr("fill", "red");
})
var node = svg.selectAll('g')
.data(nodeData)
.enter()
.append('g');
var cs = node.append('circle')
.attr('cx', function(d) {
return d.x;
})
.attr('cy', function(d) {
return d.y;
})
.attr('r', 30)
.attr('fill', 'red')
.on('touchstart', function(d) {
startNode = d;
});
node.append('text')
.attr('fill', 'white')
.attr('x', function(d) {
return d.x;
})
.attr('y', function(d) {
return d.y;
})
.text(function(d) {
return d.id;
});
</script>
</body>
</html>关于javascript - d3.js 触摸并按住以创建从一个元素到另一个元素的直线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42754826/
26
4
0
我正在尝试为 Adobe After Effects 脚本编写 UI。我想添加一个功能，用户可以按住 CTRL 键单击按钮，而不是直接单击按钮而不按任何按键，以获得稍微不同的行为。 但是，问题是，
这个问题已经有答案了: Using Java's Robot to hold a key down (2 个回答) 已关闭 7 年前。 我想知道是否有什么方法可以在Java中按住一个键一段时间。问题是
案例展示: 如果点击按钮，然后按住'enter'键，按钮的点击事件会不断触发。 document.querySelector('button').addEventListener('click', f
在尝试获取时间时，我没有得到预期的值。 当我运行这个时，时间是 19:59。而在 timeDifferenceString 中，Value 为 71976.894206。我认为这是当前时间。 我计算
我想实现一个按住按钮。因此，当您按下按钮时，功能 A 将执行，而当您松开按钮时，功能 B 将执行。我找到了这个，但这不是我想要的。 UIButton Touch and Hold 我不想要任何重复的
html a visit reigel-codes.co.cc 问题 如何通过按住左键单击在 之后添加复选框？..然后在释放左键时停止添加... 到目前为止我已经尝试过 $(
有点像编程新手，制作了一个测试演示来弄清楚按键输入是如何工作的。在我开始注意到某些 key 未被注册之前，该演示看起来不错。我只是按住 q -> w -> e -> r -> t 并且 t 没有出现在
所以在模拟器上，这个菜单图标看起来像(未按下时): 当我按住它时，它周围会出现一些笔触/轮廓，如下所示: 然而，当我将应用程序放在我的 (kitkat api) 手机上时，圆形图标周围的整个正方形都会
我制作了两个片段，相同的代码，一个在 JSFiddle 中一个作为 Stack Snippet(见下文)。出于某种原因，Ctrl 键 + 拖动会产生不同的结果。 如果我按住 Ctrl 键，JSFidd
我正在做一个项目，我需要检测音量降低按钮的按下以及该键的长按。我尝试使用 onKeyDown 和 onKeyLongPress 方法。但它不起作用。我该如何解决这个问题？ 最佳答案 这可以使用标志来完
我有一个Sudoku我想制作它，以便用户可以按下 Shift 键并按住它，同时使用箭头键在单元格之间上下移动。已设置的单元格为 标签与其他标签类似，但它们具有 readonly属性。每个单元格都有一个
正如问题的标题所述，当我在 iOS 中按住一个按钮时，我希望显示该按钮的标题。我该怎么做？需要一些建议.. 最佳答案 试试这个，也许它会对你有帮助... [btnName setTitle:@"You
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and t
我已经在 Red5 服务器上配置了 Red5Phone。我能够连接到 Asterisk 服务器，它工作正常。我使用 Flex 作为客户端。 Red5 和 Asterisk 在同一台服务器上。 现在我想
我想让某个方法运行并在某人的手指按下按钮时重复运行。我希望该方法在手指不再位于按钮上时停止自身重复 有没有办法检查在方法实现过程中是否仍然发生触碰？帮助! 最佳答案 您可以使用 UIControlEv
我正在开发在 Windows XP Standard 上运行的触摸屏应用程序。使用当前的硬件来调用右键单击用户必须单击并按住几秒钟，但这可能会干扰其他操作，例如在滚动查看器中按住重复按钮，因此我决定禁
当用户输入 html 输入文本时，当用户故意或错误地按下 Alt 键时，是否可以阻止浏览器显示其菜单 最佳答案 这应该适合你。 fiddle : http://jsfiddle.net/2dqCD/
在我的控制台中，我的以下脚本不仅在单击鼠标滚轮时开始记录，还在您停止按住鼠标滚轮按钮后继续记录。 var mPosX, mPosY; $(document).on('mousedown', f
按住 Shift 键时，我无法获得某些数字键盘键的正确代码。仅当数字锁定键打开时，数字键盘上的数字键和 point/del 键才会发生这种情况。 $('body').keyup(function (e
我有 10 个 div ... 我想使用 jQuery 使用点击处理程序选择其中的 5 个。 $(".myDivs").on("click", function() { console.
我是一名优秀的程序员,十分优秀！