Javascript SVG'；tspan&x27；元素和内容不匹配

我很难让一个

.on（“click”）

事件正常工作，可能是因为我试图单击的元素的显示文本似乎与其实际的DOM元素不匹配

图片说明了问题：当我的鼠标位于

.sublabel2

元素上时（在示例中，仅为字符串

[]

），使用Chrome的开发工具，DOM元素在另一个位置高亮显示（左上方的蓝色矩形）。 你知道这是什么原因吗

下面的代码是我正在使用的。以下是如何创建主

svg:text

节点：

pc.createAxes = function() {
  if (g) pc.removeAxes();

  // Add a group element for each dimension.
  g = pc.svg.selectAll(".dimension")
      .data(pc.getOrderedDimensionKeys(), function(d) {
        return d;
      })
    .enter().append("svg:g")
      .attr("class", "dimension")
      .attr("transform", function(d) {
        return "translate(" + xscale(d) + ")";
      });

 // Add an axis and title.
  myLabelNode = g.append("svg:g")
      .attr("class", "axis")
      .attr("transform", "translate(0,0)")
      .each(function(d) {
        var axisElement = d3.select(this).call( pc.applyAxisConfig(axis, __.dimensions[d]) );

        axisElement.selectAll("path")
            .style("fill", "none")
            .style("stroke", "#222")
            .style("shape-rendering", "crispEdges");

        axisElement.selectAll("line")
            .style("fill", "none")
            .style("stroke", "#222")
            .style("shape-rendering", "crispEdges");
      })
    .append('svg:text') //create a node to append tspans

    setLabels(myLabelNode); 
//I skip more less relevant code here for brevity
}

以及如何在单独的

setLabels（）函数中定位标签/子标签：

function setLabels(svg_text_node)  {
 svg_text_node.append('tspan') 
          .attr({
                "text-anchor": "middle",
                "y": -40,
                "x": 0,
                "dy": 0,
                "class": "label"
          })

        .on("dblclick", flipAxisAndUpdatePCP)
        .on("wheel", rotateLabels)

    svg_text_node.append('tspan') 
        .attr({
            "text-anchor": "middle",
            "x": 0,
            "dy": 17,
            "class": "sublabel1"
      })


    svg_text_node.append('tspan') 
        .attr({
            "text-anchor": "middle",
            "x": 0,
            "dy": 14,
            "class": "sublabel2"
      })
 }

如果您没有使用绝对或相对定位对对象进行重新定位，它将在对象所在的位置显示高光。单击处理程序不工作的原因可能是z索引问题。尝试为div指定一个高于页面上其他项的z索引，然后查看单击处理程序是否开始正常工作

每当您使用绝对或相对定位重新定位某个东西时，您总是需要考虑这将如何影响Z-索引并相应地调整它。
谢谢，所以您说高亮显示和实际对象之间的不匹配不应该是<代码>上的问题。单击“< /代码>事件”？如果您有时间，我想知道如何避免上述函数中的不匹配。将
tspan
附加到现有节点是否不足以将其位置设置为与节点相同的位置？否则，我尝试设置一个高的z索引值（1000），但它仍然不能正常工作。我担心错误在其他地方，所以当我更好地理解正在发生的事情时，我可能会回来。蓝色高亮显示的是显示对象原始位置的控制台。控制台就是这样工作的——但只要按钮重新定位时没有被其他元素覆盖，它就不会影响您的单击事件。还要记住，如果其他父元素没有指定z索引，则子元素上的z索引将无法正确堆叠。给出父位置：relative和低于子位置的z索引应该可以解决您的问题。这是不正确的。在SVG中既没有z索引也没有位置：相对！您所指的文档是SVG 2，它仍然处于草稿状态。大多数SVG内容将改为v1.1。链接中的第一句话是“此功能存在风险”！将该规范中的示例粘贴到一个很容易说明它不是由Chrome、FF或IE实现的。基于对SVG中z-index的误解，该网站上存在大量问题。因此，最终，了解到控制台中的蓝色突出显示不是问题，帮助我向前迈进。我认为.on click不起作用的原因是由于一个不相关的问题，即选择是在svg加载之前完成的。通过添加计时器，click事件最终起作用。无论如何，我学到了关于z-index和DOM的有趣的东西，所以感谢它们！