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