Question

问候编码员！

我正在d3.js开展一个很酷的项目。目前我正在尝试使工具提示工作，因为在chrome中它不会将title属性显示为正常的工具提示。

我在互联网上找到了2个解决方案：

- 在单独的框中显示元素的范围。我似乎没有在我的项目中使用它。

- 使用d3将div附加到svg，以便在鼠标旁边显示一个浮动文本框。我成功完成了这项工作，但仅限于Chrome。如果我在firefox中执行此操作，则该框将显示在左下方。我甚至尝试了d3.mouse（this）作为坐标，但它只是出现在意想不到的地方。

在小提琴中，您可以看到两种解决方案＆＃34;。

http://jsfiddle.net/fbba7u8h/5/

PS。 firefox似乎在＆＃34;事件＆＃34;啄。

// square用HTML定义，红色圆圈用js d3代码制作 javascript：

  d3.select("#square") 
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

var tooltip = d3.select("body")
.append("div")
.attr("class", "halloTip")
.text("this is a tooltip using d3 js, in chrome it hovers next to mouse, in firefox it pops up in the bottom left! I also tried d3.mouse(this)[0] and [1] at the onMouseMove");

// css样式：

.halloTip{
    position:absolute;
    z-index:10;
    visibility:hidden;
    text:qqq;   
    background-color:rgb(5, 225, 153);
    stroke:black;   
    padding:11px;
}
.halloTip:hover{
    visibility:hidden;
    stroke-opacity:0.8; 
}

Answer 1

尝试引用d3.event而不是事件。

.on("mousemove", function(){ ... d3.event.pageY ... }

如果这也不起作用，请尝试解决方法...类似于：

var mouse = { x: 0, y: 0 };
document.addEventListener("mousemove", function(e) {
    mouse.x = e.pageX;
    mouse.y = e.pageY;
});

然后在其他回调中引用mouse.x / mouse.y

Answer 2

可能不是您问题的直接答案，但我想在图表上显示工具提示的实现，其中包含圆圈作为数据点。
我的HTML非常简单，包含工具提示“holder”<div>容器和<section>元素，它包含整个svg-graph，如下所示：

HTML：

<div id="tooltip" class="hidden">
  <p><span id="date"></span></p>
  <p><span id="value"></span></p>
</div>
<section class="graph"></section>

然后在我的javascript文件中，我在其他代码中画了一个圆圈，有3个事件监听器：

JS：

var circles = svg.selectAll("circle")
            .data(newData)
            .enter()
            .append("circle")
            .attr(initialCircleAttrs)
            .on("mouseover", handleMouseOver)
            .on("mouseout", handleMouseOut);

现在handleMouseOver和handleMouseOut是包含整个逻辑的函数：

JS：

function handleMouseOut(d, i) {
        d3.select(this).attr({
            fill: "#fff",
            "stroke-width": 2,
            r: radius
        });

        //Hide the tooltip
        d3.select("#tooltip").classed("hidden", true);
    }

    function handleMouseOver(d, i) {
        d3.select(this).attr({
            fill: "#426426",
            "stroke-width": 0,
            r: radius * 2
        });

        // Tooltip
        //Get this bar's x/y values, then augment for the tooltip
        var xPosition = parseFloat(d3.select(this).attr("cx")) - 40;
        var yPosition = parseFloat(d3.select(this).attr("cy")) - 70;

        //Update the tooltip position and text
        d3.select("#tooltip")
            .style("left", xPosition + "px")
            .style("top", yPosition + "px")                 
            .select("#value")
            .text(parseFloat(d.Amount).toFixed(2));

        d3.select("#date")
            .text(dateFormat(parse(d.Date)));

        //Show the tooltip
        d3.select("#tooltip").classed("hidden", false);
    }

handleMouseOver函数会更改圆的颜色，然后计算数据点的x和y坐标，并根据该坐标显示{c}属性#tooltip设置为{position的{{1}} 1}}，如此：

CSS：

absolute

#tooltip { font-family:'Open Sans', Arial, sans-serif; font-size:14px; text-align:center; pointer-events: none; position: absolute; height: auto; padding: 10px; background-color: rgba(0,0,0,0.7); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); } #tooltip.hidden { display: none; }函数只是将隐藏的类添加到handleMouseOut。

如果有人想要采用您提到的第一种方法，这可能会有所帮助。这是一个工具提示，作为在#tooltip和mouseover事件上切换的单独容器我还要补充一点，它在所有现代浏览器中都能很好地工作，但也适用于IE。

Javascript工具提示跨浏览器不兼容

2 个答案: