- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在创建一个 d3 对象,它由三 Angular 形多边形组成。
我有一个可拖动的圆圈指针,如何捕获鼠标下方多边形的 ID(在鼠标事件下,而圆圈仍然表现得像一个可视指针)。希望这是有道理的。
HTML
<div style="width:1000px;" id="triangle">
<svg height="1000" width="1000" id="ternary">
<defs>
<!--The Pointe-->
<g id="pointer" transform="scale(0.8)">
<circle cx="0" cy="0" r="20" stroke="black" stroke-width="1"/>
</g>
</defs>
</svg>
</div>
Javascript
window.addEventListener('load', function() {
var ternary = d3.select("#ternary");
var pointer = d3.select("#pointer");
var w = 50,
h = 50,
rows = 20;
b = 1000;
t = 950;
wm = 25;
var osb = 0;
for (s = 1; s <= 20; s++) {
if (!s % 2 == 0) {
rb = b - osb;
rt = t - osb;
} else {
rb = b - osb;
rt = t - osb;
}
for (i = 1; i <= rows - s; i++) {
console.log();
osl = (i - 1) * w + ((s - 1) * 25);
if (s) {
if (s % 2 == 0) {
trColor = '#3c763d';
osl = (i - 1) * w + ((s - 1) * 25);
var x1 = osl;
var x2 = osl + (w / 2);;
var x3 = osl + w;
// console.log(rt);
ternary.append('polygon')
.attr('points', osl + ' ' + (rt) + ', ' + x3 + ' ' + (rt) + ' , ' + x2 + ' ' + (rb))
.attr('class', 'r' + s + 'c' + i)
.style('fill', '#3c754d');
} else {
trColor = '#3c739d'
osl = (i - 1) * w + ((s - 1) * 25);
var x1 = osl;
var x2 = osl + (w / 2);;
var x3 = osl + w;
ternary.append('polygon')
.attr('points', osl + ' ' + rb + ', ' + x2 + ' ' + rt + ' , ' + x3 + ' ' + rb)
.attr('class', 'r' + s + 'c' + i)
.style('fill', '#3c763d');
};
}
}
if (s % 2 == 0 && s > 2) {
osb = osb + 50;
}
}
ternary.append("use")
.attr("href", "#pointer")
.attr("x", 500)
.attr("y", 875)
.attr("fill", "#039BE5")
.attr("stroke", "#039BE5")
.attr("stroke-width", "1px");
var dragHandler = d3.drag()
.on("drag", function() {
d3.select(this)
.attr("x", d3.event.x)
.attr("y", d3.event.y);
/*
How do I Get the id of underlying triangle?
*/
});
dragHandler(svg.selectAll("use"));
});
他们是实现这一目标的直接方法吗?
最佳答案
有几个选项可以找到被拖动元素下的内容。
一种是利用拖动的start
和end
事件,根据需要改变被拖动对象的指针事件属性。在拖动开始时,我们可以将其设置为none
,在拖动结束时,我们可以将指针事件恢复为all
。尽管将指针事件设置为无,但拖动仍在继续,但现在可以为拖动元素下方的内容触发指针事件。
如果我们只希望它们响应拖动事件,我们还可以使用开始/结束事件将事件监听器添加到底层元素。
下面的代码片段使用了这个想法,拖动圆圈与底层矩形进行交互。当拖动开始时,指针事件从圆圈中移除,鼠标事件监听器添加到 rects。在拖动结束时,一切都恢复到原来的样子:
var svg = d3.select("body")
.append("svg")
.attr("width",500)
.attr("height",300);
function color(d) {
return d3.scaleLinear()
.range(["teal","steelblue","crimson","orange"])
.domain([0,30,40,60])(d);
}
var grid = svg.selectAll(null)
.data(d3.range(60))
.enter()
.append("rect")
.attr("width", 50)
.attr("height", 50)
.attr("y", function(d) { return Math.floor(d/10)*50; })
.attr("x", function(d) { return d%10*50; })
.attr("fill", color)
.attr("id", function(d){
return "rect-"+d;
})
var circle = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 10);
var drag = d3.drag()
.on("start",start)
.on("drag",dragged)
.on("end",end);
circle.call(drag);
function start() {
grid.on("mouseover", function() {
d3.select(this).attr("fill","yellow");
console.log(this.id);
})
.on("mouseout", function() {
d3.select(this).attr("fill",color);
})
d3.select(this)
.style("pointer-events","none");
}
function dragged() {
d3.select(this)
.attr("cx", d3.mouse(this)[0])
.attr("cy", d3.mouse(this)[1]);
}
function end() {
grid.on("mouseover",null)
.on("mouseout", null)
.transition()
.attr("fill",color);
d3.select(this)
.style("pointer-events","all");
}
.as-console-wrapper { max-height: 30px !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
关于javascript - D3 在拖动圆圈时获取下方多边形的 id,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57027865/
我已经实现了 Bentley-Ottmann-algorithm检测多边形-多边形交叉点。这通常非常有效:由于多边形不自相交,因此两个多边形的线段并集中的任何线段相交表明两个多边形相交。 但是如果我看
我在 Silverlight 中有一个多边形(棋盘游戏的十六进制),例如; public class GridHex : IGridShape { ..... public IList
我创建了一个简单的 DirectX 应用程序来渲染一个顶点场。顶点呈现如下(如果从顶部查看): |\|\|\|\| |\|\|\|\| 每个三角形都是这样渲染的: 1 |\ 2 3 这应该意味着多边形
我的代码的某些部分here : var stage = new Kinetic.Stage({ container: "canvas", width: 300,
我正在尝试从 map 数据构造导航网格物体。步骤之一涉及将二进制图像(其中0表示占用空间,1表示自由空间)转换成平面直线图。 我正在尝试找到一种可靠的方法。我目前的想法是使用Canny边缘检测器,然后
我的任务是编写 MATLAB 代码来生成一个由 4 部分组成的 Logo ,如屏幕截图所示。左上角应为黑色,右下角应为白色。另一个程序应随机选择两种颜色。 我采取了以下方法: clear all cl
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭 1
如何向 google.maps.Rectangle 和 google.maps.Polygon 添加标题? title 属性在 RectangleOptions 中不可用.我试过了,但没用(对于 go
我有一个表,用于将表上的段存储为多边形。然后我想获取所有被另一个多边形接触的线段,例如正方形或圆形。图片上:http://img.acianetmedia.com/GJ3 我将灰色小框表示为段和 bi
我正在我的网站上使用 CSS 来制作形状。它在 chrome 中运行良好,但在 mozilla、internet explorer 中打开时,它无法运行。 有人知道怎么解决吗? 这是 fiddle h
我使用 DrawingManager 在 Google map 上绘制圆形和多边形。我尝试使用下面的代码删除圆形/多边形。 selectedShape.setMap(null); 这里selected
我看到了很多如何检测碰撞的教程,但没有看到如何解决它。我正在制作一个自上而下的游戏,玩家具有圆形碰撞形状,而墙壁是各种多边形。 我正在使用 slick2d。我应该做的是,如果玩家与角落碰撞,我会按法线
我对 tkinter 比较陌生,我正在制作一个只使用正方形的游戏。我正在抄写的书只显示三角形。这是代码: # The tkinter launcher (Already complete) from
我在 OpenCV/Python 中工作,我遇到了这个问题。我已经使用 cv2.minAreaRect() 来获取围绕一组点的边界框。是否有任何其他函数/通用算法可以给我内接多边形(点集)的最大矩形?
如果给定一组线段 S ,我们能否设计一种算法来测试集合 S 中的线段是否可以形成多边形,我对它们是否相交多边形不感兴趣,我只想知道我可以测试什么标准, 任何建议 最佳答案 构建一个图形数据结构,其中节
如何从多个地理位置(经度、纬度值)创建多边形地理围栏。此外,如何在 Android 上跟踪用户进入此地理围栏区域或从该区域退出。 最佳答案 地理围栏只是一组形成多边形的纬度/经度点。获得纬度/经度点列
我想要一个 complex image like this在我的申请中。我想让用户点击复杂的多边形(在这种情况下是有边界的国家/地区)并突出显示他们点击的多边形。我有我需要用于该状态的图像。 我怎样才
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,
我想在 python tkinter 中移动对象,特别是多边形。问题出在 is_click 函数中。我似乎无法弄清楚如何确定我是否单击了该对象。代码还没有 100% 完成,移动仍然需要完成,但我现在需
我有一个大多边形,我想找到与该多边形相交的要素,但由于多边形太大,我遇到超时异常。 我试图研究 JTS 方法,但不知道如何使用它。 final List coordinates = List.of(n
我是一名优秀的程序员,十分优秀!