SVG'tspan'元素和内容不匹配

我无法让.on("click")事件工作，可能是因为我试图点击的元素的显示文本似乎与其实际的DOM元素不匹配。SVG'tspan'元素和内容不匹配

图片说明问题：当我的鼠标是.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" 
     }) 
}

来源

2017-06-05 sc28

它表示在位置高亮的对象将在没有使用绝对或相对定位的情况下重新定位它。点击处理程序不工作的原因可能是z索引问题。尝试给div一个高于页面上其余项目的z-index，看看你的点击处理程序是否开始正常工作。

每当您使用绝对或相对定位重新定位某些东西时，您总是需要考虑这将如何影响z-索引并相应地进行调整。

来源

2017-06-05 16:53:28 Korgrue

谢谢，所以你说高亮和实际对象之间的不匹配不应该是'on.click'事件的问题？如果你有一个时刻，我有兴趣知道该怎么做才能避免上述函数中的不匹配。是否将“tspan”附加到现有节点上，而不足以将其位置设置为与节点相同的位置？否则，我尝试设置一个高Z值（1000），它仍然无法正常工作。我担心这个错误在其他地方，所以当我更好地理解发生了什么时，我可能会回来。 – sc28

正确。该蓝色突出显示是显示对象原始位置的控制台。控制台就是这样工作的 - 但只要重新定位的按钮没有被其他元素覆盖，它就不会影响你的点击事件。还请记住，如果您的其他父元素没有分配z-index，那么子级上的z-index将无法正确堆叠。给予父母的位置：亲属和低于孩子的Z指数应该解决您的问题。 – Korgrue

这是不正确的。在SVG中，既没有z-索引也没有一个位置：相对的！ – altocumulus

SVG'tspan'元素和内容不匹配

回答

相关问题