#javascript #chart.js
#javascript #chart.js
Вопрос:
Я реализую линейную диаграмму с большим количеством точек. В настоящее время у меня настроено наведение / всплывающая подсказка с:
hover: {
mode: "x-axis"
},
tooltips: {
mode: "x-axis"
}
В этой реализации всплывающая подсказка появляется исчезает всякий раз, когда я перемещаю мышь, что может отвлекать, если я быстро перемещаю мышь. Есть ли способ убедиться, что всплывающая подсказка никогда не исчезает при наведении курсора мыши на область графика?
В частности, если мой курсор находится в точке A, я бы хотел, чтобы всплывающая подсказка для точки A была видимой. Когда я перемещаю курсор в сторону точки B, я бы хотел, чтобы всплывающая подсказка для точки A оставалась видимой, пока я не окажусь на полпути к точке B, и в этот момент я бы хотел, чтобы всплывающая подсказка перескочила в точку B.
Каков наилучший способ добиться этого?
Ответ №1:
Возможно, вам захочется найти ближайшую точку к вашей мыши при входе в область построения и отобразить всплывающую подсказку этой точки.
Я предлагаю вам прочитать этот замечательный пост, в котором довольно хорошо объясняется, как вы можете создавать отличные всплывающие подсказки. В приведенном выше сообщении не отображается текст над точками, но логика точно такая же для того, что вы хотите сделать. Важнейший фрагмент кода:
// append the rectangle to capture mouse
svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all")
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
//you may want to change that to select a text area rather than a circle - whatever object is your tooltip in your code
focus.select("circle.y")
.attr("transform",
"translate(" x(d.date) ","
y(d.close) ")");
}