Я использую следующий код в рендлете для диаграмм серии, чтобы получить подсказку D3.
lines.on('renderlet', function(chart) {
chart.selectAll('g.x text')
.attr('transform', 'translate(-29,30) rotate(315)')
chart.selectAll('circle')
.on("mouseover", function(d) {
d3.select(this)
.transition()
.duration(500)
div.transition()
.duration(200)
.style("opacity", 0.9);
div.html("<table><thead><tr><th colspan='2' class='toolHead'>" + d.data.key[1] +
'</th></tr></thead><tbody>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><td colspan="2">' +
d.data.key[0] + '</td></tr>' + '<tr style="margin-top: 100px"><td class="toolHeadCol"><b>' + 'value: ' +
'</b></td> <td>' + d.y + '</td></tr></tbody></table>')
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function() {
d3.select(this)
.transition()
.duration(500)
.style('opacity', 0)
div.transition()
.duration(500)
.style("opacity", 0)
})
При наведении на определенную точку данных в строке отображается всплывающая подсказка.Точка данных на линии (окружности) работает, как и ожидалось, но есть некоторые проблемы с соответствующими горизонтальными и вертикальными линиями сетки.
- Они не исчезают при наведении мыши и остаются до тех пор, пока не появится другая окружность.
- Поскольку это последовательная диаграмма, имеется несколько строк, и наведение курсора на точку данных в одной строке, похоже, не зависит от наведения мыши на другую строку.Как показано на изображении ниже:
Как показано на рисунке, линия сетки на синей линии остается видимой, даже когда она находится вверхуна оранжевой линии.
Как это исправить?
Вот скрипка