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'元素和內容不匹配

回答

相關問題