Html 如何防止多个SVG元素（文本标签）在不同SVG元素上方的鼠标上发生干扰？
我知道SVG元素没有z索引。我还知道，定义SVG元素的顺序将决定其垂直顺序。根据我在类似问题上看到的情况，解决这个问题的方法通常是选择单个元素并执行以下操作： identifier.node（）.parentNode.appendChild（identifier.node（）） 这把它带到甲板的顶部。但是，当您有多个SVG元素需要移到顶部时，这不起作用 下面的代码（也请参见底部的codepen链接）是一个简化的示例，由两个相邻的圆和它们下面的一个正方形组成。每个圆都有鼠标悬停事件，它们的颜色呈现不同。但是，最左边的圆有文本标签，目前不透明度为0。当您将鼠标悬停在正方形上时，不透明度会发生变化。当鼠标悬停在圆圈各自的位置上时，这些文本标签会阻止圆圈的鼠标悬停事件。关键的是，当我在文本上悬停时，我可以随意更改最左边的圆的颜色，但一些文本标签与最右边的圆重叠，因此在这些重叠位置会使圆呈现不正确的颜色。我正在寻找的解决方案是改变所有文本标签的垂直顺序，这样当鼠标悬停在最左边的圆圈的所有点上时，圆圈变为绿色，同样，当鼠标悬停在正方形上时，所有文本标签都在顶部，以红色显示。如何选择所有这些选项Html 如何防止多个SVG元素（文本标签）在不同SVG元素上方的鼠标上发生干扰？,html,d3.js,select,svg,Html,D3.js,Select,Svg,我知道SVG元素没有z索引。我还知道，定义SVG元素的顺序将决定其垂直顺序。根据我在类似问题上看到的情况，解决这个问题的方法通常是选择单个元素并执行以下操作： identifier.node（）.parentNode.appendChild（identifier.node（）） 这把它带到甲板的顶部。但是，当您有多个SVG元素需要移到顶部时，这不起作用 下面的代码（也请参见底部的codepen链接）是一个简化的示例，由两个相邻的圆和它们下面的一个正方形组成。每个圆都有鼠标悬停事件，它们的颜色呈现
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Adjusted radii</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.0/d3.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 500;
var padding = 20;
var circleDataset1 = [
[800, 1000]
];
var circleDataset2 = [
[900, 500]
];
var squareDataset = [
[800, 1200]
];
var labs = [[100,450],[200,450], [100,550],[200,650],[50,450], [200,750],[0,650],[200,550],[250,450], [60,650],[250,550],[0,550], [0,750], [50,750], [100,750],]
//Create scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(circleDataset1, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(circleDataset1, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, 2000 ])
.range([0.05, 25]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var svg2 = d3.select('body')
.append("svg")
.attr("width", w)
.attr("height", h);
//Create circles
svg.selectAll("circle")
.data(circleDataset1)
.enter()
.append("circle")
.attr("cx", 100)
.attr("cy", 200)
.attr("r", 100)
.on('mouseover',function(d) {
d3.select(this)
.attr('fill','green');
})
.on("mouseout", function(d) {
d3.select(this)
.attr('fill','black');
})
svg.selectAll("ellipse")
.data(circleDataset2)
.enter()
.append("ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 100)
.attr("ry", 100)
.attr('fill','grey')
.on('mouseover',function(d) {
d3.select(this)
.attr('fill','blue');
})
.on("mouseout", function(d) {
d3.select(this)
.attr('fill','grey');
})
svg.selectAll('rect')
.data(squareDataset)
.enter()
.append("rect")
.attr("x", 100)
.attr("y", 400)
.attr("width", 100)
.attr('height',500)
.attr('fill','red')
.on('mouseover',function(d) {
d3.select(this)
d3.selectAll('.textlabel').style({opacity:'1'});
})
.on('mouseout',function(d) {
d3.select(this)
d3.selectAll('.textlabel').style({opacity:'0'});
})
//Create labels
svg.selectAll("text")
.data(labs)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red")
.attr('class','textlabel')
.style('opacity',0)
//////////////////////
// Even if I select all elements by a classname and , only 1 of the elements will move to the front
// textLabs = d3.selectAll('.textlabel')
// .style('opacity',1.0)
// textLabs.node().parentNode.appendChild(textLabs.node());
///////////////////////
</script>
</body>
</html>
D3：调整半径
//宽度和高度
var w=500；
var h=500；
var=20；
变量circleDataset1=[
[800, 1000]
];
变量circleDataset2=[
[900, 500]
];
var squareDataset=[
[800, 1200]
];
var labs=[100450]、[200450]、[100550]、[200650]、[50450]、[200750]、[0650]、[200550]、[250450]、[60650]、[250550]、[0550]、[0750]、[50750]、[100750]、]
//创建比例函数
var xScale=d3.scale.linear（）
.domain（[0，d3.max（circleDataset1，函数（d）{返回d[0]；}）]）
.范围（[填充，w-填充*2]）；
var yScale=d3.scale.linear（）
.domain（[0，d3.max（circleDataset1，函数（d）{返回d[1]；}）]）
.范围（[h-填充，填充]）；
var rScale=d3.scale.linear（）
.domain（[0，2000]）
.范围（[0.05,25]）；
//创建SVG元素
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var svg2=d3.select（'body'）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
//创建圆圈
svg.selectAll（“圆圈”）
.数据（循环数据集1）
.输入（）
.附加（“圆圈”）
.attr（“cx”，100）
.attr（“cy”，200）
.attr（“r”，100）
.on（'mouseover'，函数（d）{
d3.选择（本）
.attr（'fill'，'green'）；
})
.on（“mouseout”），函数（d）{
d3.选择（本）
.attr（'fill'，'black'）；
})
svg.selectAll（“椭圆”）
.数据（循环数据集2）
.输入（）
.append（“椭圆”）
.attr（“cx”，200）
.attr（“cy”，200）
.attr（“rx”，100）
.attr（“ry”，100）
.attr（'填充'，'灰色'）
.on（'mouseover'，函数（d）{
d3.选择（本）
.attr（'fill'，'blue'）；
})
.on（“mouseout”），函数（d）{
d3.选择（本）
.attr（'fill'，'grey'）；
})
svg.selectAll（'rect'）
.数据（数据集）
.输入（）
.append（“rect”）
.attr（“x”，100）
.attr（“y”，400）
.attr（“宽度”，100）
.attr（'height'，500）
.attr（'fill'，'red'）
.on（'mouseover'，函数（d）{
d3.选择（本）
d3.selectAll（'.textlabel'）.style（{opacity:'1'}）；
})
.on（'mouseout'，函数（d）{
d3.选择（本）
d3.selectAll（'.textlabel'）.style（{opacity:'0'}）；
})
//创建标签
svg.selectAll（“文本”）
.数据（实验室）
.输入（）
.append（“文本”）
.文本（功能（d）{
返回d[0]+“，”+d[1]；
})
.attr（“x”，函数（d）{
返回xScale（d[0]）；
})
.attr（“y”，函数（d）{
返回yScale（d[1]）；
})
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“11px”）
.attr（“填充”、“红色”）
.attr（'class'，'textlab'）
.style（'opacity'，0）
//////////////////////
//即使我用类名和选择所有元素，也只有一个元素会移到前面
//textLabs=d3。选择全部（'.textlab'）
//.style（'opacity'，1.0）
//textLabs.node（）.parentNode.appendChild（textLabs.node（））；
///////////////////////
您想做的任何事情都不需要Javascript
- 在文本标签上设置
- 使用a使标签在hov时显示