Question

我无法使.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"
      })
 }

Answer 1

如果您没有使用绝对或相对定位重新定位对象，则显示对象所在位置的高亮显示。单击处理程序不起作用的原因可能是z索引问题。尝试给div一个高于页面上其他项目的z-index，看看你的点击处理程序是否开始正常工作。

每当您使用绝对或相对定位重新定位某些内容时，您始终需要考虑这将如何影响z-index并相应地进行调整。

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

1 个答案: