javascript - d3 将文本和圆圈视为一个对象

Question

我在强制布局上有一些带有文字的圆圈。工具提示是使用 d3-tip. 生成的

问题是，即使我将文本和圆圈归为一组，鼠标悬停和单击等事件仍然将这两个对象视为单独的对象。

当我将鼠标悬停在圆圈中的文本上时，会显示工具提示。当我将光标移出文本(但仍在圆圈内)时，会重新生成并显示相同的工具提示，但位置略有不同。

有什么方法可以使两个对象表现得像一个对象吗？我的目标是实现无缝过渡，这样用户就不会意识到这两个是单独的对象。

左:鼠标悬停在圆圈上 右:鼠标悬停在文本上

 var tip = d3.tip()
        .attr("class", "d3-tip")
        .html(function(d) {return d["ModuleTitle"];});

    var vis = d3.select("body")
        .append("svg")
        .call(tip);

    var elem = svgContainer.selectAll("g")
        .data(nodesData);

    var elemEnter = elem.enter()
        .append("g")
        .on('mouseover', tip.show)
        .on('mousedown', tip.hide)
        .on('mouseout', tip.hide);

    var circle = elemEnter.append("circle")
        .attr("r", function(d) {return d.radius;})
        .style("fill", function(d, i) { return color(i % 20);})
        .call(force.drag);


    var text = elemEnter.append("text")
        .attr("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .attr("font-size", function(d) {return d.fontsize;})
        .attr("fill", "black")
        .text(function(d) {return d["ModuleCode"];});

Answer 1

如果您不希望文本触发事件，则应将其指针事件样式设置为无。您可以在 css 中执行此操作:

 text {
  pointer-events: none;
 }

或者在创建元素时使用 D3:

var text = elemEnter.append("text")
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .attr("font-size", function(d) {return d.fontsize;})
    .attr("fill", "black")
    .style("pointer-events", "none")
    .text(function(d) {return d["ModuleCode"];});