Question

我已经在d3中实现了我认为相对简单的鼠标悬停行为，但我显然遗漏了一些东西，因为我似乎无法弄清楚它为什么不起作用。

目标是使文本块与数据点数组相关联，并在用户将鼠标悬停在数据点上时显示文本块。当用户点击数据点时，文本块仍然可见。我没有使用工具提示，因为我需要一次显示多个文本块。

首先，我使用Bostock自己的包装函数（http://bl.ocks.org/mbostock/7555321）在svg中创建文本块

function wrap(text, width, xLoc, yLoc) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.0, // ems
        y = text.attr("y"),
        //dy = parseFloat(text.attr("dy")),
        dy = 0,
        tspan = text.text(null).append("tspan").attr("x", xLoc).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", xLoc).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

使用此函数创建块本身：

 svgContainer.selectAll("text")
    .data(data)
    .enter()
    .append("text")
        .attr("x", function(d) { return d.x_axis; })
        .attr("y", function(d) { return d.y_axis; })
        .attr("id", function(d) {return("textBlock" + d.documentNumber);})
        .attr("visibility", "visible")
        .text(function(d) { return d.description;});
        .call(wrap, 200, function(d) { return d.x_axis; }, function(d) { return d.y_axis; });

数据点的鼠标悬停功能（绘制为svg圆圈）如下所示。请注意，以下配置只是为了打开#textBlock5的可见性，而不管哪个圈子被覆盖;这是一个调试步骤，只是为了从select语句

中删除该函数

    svgContainer.selectAll("circle")
        .data(data)
        .on("mouseover", function(d){
            return console.log("#textBlock"+d.documentNumber);
            d3.select("#textBlock5").attr("visibility", "visible");
            });

在DOM中正确构建了ID（见下文），但是鼠标悬停功能并没有改变可见性属性......任何人都可以帮我识别我在这里做错了什么！？

<text x="927.1563942727792" y="673.2598605856803" id="textBlock5" visibility="visible">
<tspan x="927.1563942727792" y="673.2598605856803" dy="0em">text here</tspan>
//more tspans here...
</text>

Answer 1

OMG，birdspider。我无法相信我没有看到......这表明一个好的休息对我有什么价值。感谢您抽出宝贵的时间让这一次成为一次并且如此敏锐！

d3js svg按id选择文本

1 个答案: