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

Question

I'm having trouble getting a .on("click") event to work, probably because the displayed text of an element I'm trying to click seems to mismatch its actual DOM element.

The picture illustrates the issue: when my mouse is on the .sublabel2 element (in the example, simply the string [] ), using Chrome's dev tool, the DOM element is highlighted in another position (blue rectangle upper left). Any ideas what could be causing this?

The code below is what I am using. Here is how I create the main svg:text node:

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
}

And how I position the labels/sublabels in a separate setLabels() function:

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"
      })
 }

Answer 1

It is showing the highlight in the location that the object would be in had you not repositioned it using your either absolute or relative positioning. The reason the click handler is not working is likely a z-index issue. Try giving the div a z-index higher than the rest of the items on the page and see if your click handler starts working properly.

Whenever you reposition something using absolute or relative positioning, you always need to consider how this will impact z-index and adjust for it accordingly.