Question

所以我正在关注本教程https://www.d3-graph-gallery.com/graph/barplot_stacked_hover.html

我目前停留在工具提示部分。我遵循了代码，但工具提示显示在页面底部，而不是显示在光标旁边。

这是我的JS代码：

let tooltip = d3.select("#bar_chart3")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "1px")
    .style("border-radius", "5px")
    .style("padding", "10px")

let mouseOver = function(d) {
    let typeName = d3.select(this.parentNode).datum().key;
    let typeValue = d.data[typeName];

    tooltip
        .html("type: " + typeName + "<br>" + "value: " + typeValue)
        .style("opacity", 1)
}

let mouseMove = function(d) {
    tooltip
        .style("left", (d3.mouse(this)[0]+90) + "px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
        .style("top", (d3.mouse(this)[1]) + "px")
}

let mouseLeave = function(d) {
    tooltip
        .style("opacity", 0)
}

bar3_svg.append('g')
    .selectAll('g')
    .data(stackedData)
    .enter().append('g')
        .attr('fill', function(d) { return color(d.key); })
        .selectAll('rect')
        .data(d => d)
        .enter().append('rect')
            .attr('x', d => x(d.data.projectName))
            .attr('y', d => y(d[1]))
            .attr('height', d => (y(d[0]) - y(d[1])))
            .attr('width', x.bandwidth())
            .attr('stroke', 'grey')
        .on('mouseover', mouseOver)
        .on('mousemove', mouseMove)
        .on('mouseleave', mouseLeave)

HTML代码：

<body>
    <div id="bar_chart3"></div>
</body>

我在这里想念什么？

d3.js V5工具提示显示在错误的位置

0 个答案: