Javascript 修复d3.js v4工具提示位置

我一直在尝试使用D3V4插件在我的网页上显示两个图表

我一直在遵循一些关于工具提示用法的示例，但我有一个问题：在第一个图表中，工具提示显示在正确的位置（在条形图上方），但在底部图表中，工具提示似乎位于页面底部

这是一个非常简单的例子：

HTML

JS

（函数（）{
var-mrg={t:10，r:20，b:30，l:20}；
风险值数据=[
{id:1，金额：6}，
{id:2，金额：5}，
{id:3，金额：2}，
{id:4，金额：8}
];
功能负载图（容器）{
变幅宽度=400-mrg.l-mrg.r；
可变高度=300-最大载重吨-最大载重吨；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
var tooltip=d3.select（container.append（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
var x=d3.scaleBand（）.range（[0，width]）。padding（0.1）；
变量y=d3.scaleLinear（）.range（[height，0]）；
x、 域（[1,2,3,4]）；
y、 域（[0,10]）；
var svg=d3.select（container）.append（“svg”）
.attr（“宽度”，宽度+mrg.l+mrg.r）
.attr（“高度”，高度+mrg.t+mrg.b）
.附加（“g”）
.attr（“转换”、“转换”（+mrg.l+）、“+mrg.t+”）；
svg.selectAll（“.bar”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（n）{返回x（n.id）；}）
.attr（“y”，函数（n）{返回y（n.amount）；}）
.attr（“宽度”，x.带宽（））
.attr（“高度”，函数（n）{返回高度-y（n.amount）；}）
.attr（“填充”，函数（n，i）{返回颜色（i）；}）
.on（“mousemove”，函数（n）{
工具提示
.style（“不透明度”，1）
.style（“左”，d3.event.pageX+“px”）
.style（“top”，d3.event.pageY+“px”）
.style（“显示”、“内联块”）
.html（“Hola”）
})
.on（“mouseout”，函数（n）{tooltip.style（“不透明”，0）；}）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
svg.append（“g”）.call（d3.axisLeft（y））；
}
函数init（）{
负荷图（“图表1”）；
负荷图（“图表2”）；
}
init（）；
}());

谢谢你的支持

---

关于

由于您正在使用

pageX

和

pageY

定位工具提示，因此不要将它们附加到每个选定的分区。。。而不是将它们附加到

：

以下是仅包含该更改的代码：

（函数（）{
var mrg={
t:10，
r:20，
b:30，
l:20
};
风险值数据=[{
id:1，
金额：6
},
{
id:2，
金额：5
},
{
id:3，
金额：2
},
{
id:4，
金额：8
}
];
功能负载图（容器）{
变幅宽度=400-mrg.l-mrg.r；
可变高度=300-最大载重吨-最大载重吨；
var color=d3.scaleOrdinal（d3.schemeCategory 10）；
变量工具提示=d3。选择（“主体”）。追加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
var x=d3.scaleBand（）.range（[0，width]）。padding（0.1）；
变量y=d3.scaleLinear（）.range（[height，0]）；
x、 域（[1,2,3,4]）；
y、 域（[0,10]）；
var svg=d3.select（container）.append（“svg”）
.attr（“宽度”，宽度+mrg.l+mrg.r）
.attr（“高度”，高度+mrg.t+mrg.b）
.附加（“g”）
.attr（“转换”、“转换”（+mrg.l+）、“+mrg.t+”）；
svg.selectAll（“.bar”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（n）{
返回x（n.id）；
})
.attr（“y”，函数（n）{
返回y（n.金额）；
})
.attr（“宽度”，x.带宽（））
.attr（“高度”，函数（n）{
返回高度-y（n.数量）；
})
.attr（“填充”，函数（n，i）{
返回颜色（i）；
})
.on（“mousemove”，函数（n）{
工具提示
.style（“不透明度”，1）
.style（“左”，d3.event.pageX+“px”）
.style（“top”，d3.event.pageY+“px”）
.style（“显示”、“内联块”）
.html（“Hola”）
})
.on（“鼠标出”，功能（n）{
工具提示。样式（“不透明度”，0）；
});
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
svg.append（“g”）.call（d3.axisLeft（y））；
}
函数init（）{
负荷图（“图表1”）；
负荷图（“图表2”）；
}
init（）；
}());
正文{
填充：20px；
}
c{
高度：300px；
宽度：400px；
边缘底部：10px；
}
.tooltipx{
指针事件：无；
位置：绝对位置；
显示：无；
最小宽度：50px；
高度：自动；
背景：无重复滚动0 0#ffffff；
填充：4px10px 4px10px；
边界半径：4px；
文本对齐：左对齐；
线高：1.3；
颜色：5B6770；
盒影：0px 3px 9px rgba（0,0,0,15）；
}


<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="chart1" class="c"></div>
        </div>
        <div class="col-md-12">
            <div id="chart2" class="c"></div>
        </div>
    </div>
</div>

body { padding: 20px; }

.c {
  height: 300px;
  width: 400px;
  margin-bottom: 10px;
}

.tooltipx {
    pointer-events: none;
    position: absolute;
    display: none;
    min-width: 50px;
    height: auto;
    background: none repeat scroll 0 0 #ffffff;
    padding: 4px 10px 4px 10px;
    border-radius: 4px;
    text-align: left;
    line-height: 1.3;
    color: #5B6770;
    box-shadow: 0px 3px 9px rgba(0, 0, 0, .15);
}

(function() {
    var mrg = { t:10, r:20, b:30, l:20 };

    var data = [
        { id: 1, amount: 6 },
        { id: 2, amount: 5 },
        { id: 3, amount: 2 },
        { id: 4, amount: 8 }
    ];

    function loadChart(container) {
        var width = 400 - mrg.l - mrg.r;
        var height = 300 - mrg.t - mrg.b;

        var color = d3.scaleOrdinal(d3.schemeCategory10);
        var tooltip = d3.select(container).append("div")
                        .attr("class", "tooltipx")
                        .style("opacity", 0);

        var x = d3.scaleBand().range([0, width]).padding(0.1);
        var y = d3.scaleLinear().range([height, 0]);

        x.domain([1, 2, 3, 4]);
        y.domain([0, 10]);

        var svg = d3.select(container).append("svg")
                    .attr("width", width + mrg.l + mrg.r)
                    .attr("height", height + mrg.t + mrg.b)
                    .append("g")
                    .attr("transform", "translate(" + mrg.l + "," + mrg.t + ")");

        svg.selectAll(".bar")
           .data(data)
           .enter()
           .append("rect")
           .attr("class", "bar")
           .attr("x", function(n) { return x(n.id); })
           .attr("y", function(n) { return y(n.amount); })
           .attr("width", x.bandwidth())
           .attr("height", function(n) { return height - y(n.amount); })
           .attr("fill", function(n, i) { return color(i); })
           .on("mousemove", function(n) {
               tooltip
                   .style("opacity", 1)
                   .style("left", d3.event.pageX + "px")
                   .style("top", d3.event.pageY + "px")
                   .style("display", "inline-block")
                   .html("<span>Hola</span>")
           })
           .on("mouseout", function(n) { tooltip.style("opacity", 0); });

        svg.append("g")
           .attr("transform", "translate(0," + height + ")")
           .call(d3.axisBottom(x));

        svg.append("g").call(d3.axisLeft(y));
    }

    function init() {
        loadChart("#chart1");
        loadChart("#chart2");
    }

    init();

}());

var tooltip = d3.select("body").append("div")