簡體   English   中英

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

[英]SVG 'tspan' element and content not matching

我無法使.on("click")事件起作用,可能是因為我嘗試單擊的元素的顯示文本似乎與實際的DOM元素不匹配。

圖片說明了這個問題:當我的鼠標位於.sublabel2元素(在示例中,僅是字符串[] )上時,使用Chrome的dev工具,該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-index問題。 嘗試使div的z-index高於頁面上其余項目的水平,然后查看點擊處理程序是否開始正常工作。

每當您使用絕對或相對定位重新放置某物時,始終需要考慮這將如何影響z-index並相應地對其進行調整。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM