Я хотел бы показать каждое имя переменной, которое является текстом, когда мышь наведет курсор на линию, и я использовал методы mouseover и mouseout для ее запуска, но он не показал никакого текста, который является именем переменной, на линейной диаграмме, а также нет. не появляется сообщение об ошибке на консоли.
var margin = {top: 10, right: 80, bottom: 30, left: 60},
width = 960 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
svg.selectAll(".line")
.data(sumstat)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", function(d){ return color(d.key) })
.attr("stroke-width", 1.5)
.attr("d", function(d){
return d3.line()
.x(function(d) { return x(d.Year); })
.y(function(d) { return y(+d.Price); })
(d.values)
})
.on("mouseover", function(d, i) {
svg.append("text")
.attr("class", "title-text")
.style("fill", function(d){ return color(d.key) }) //it will return the different colors based on different variable names
.text(d.key) //it will return the different variable names
.attr("text-anchor", "middle")
.attr("x", (width-margin)/2)
.attr("y", 5);
})
.on("mouseout", function(d) {
svg.select(".title-text").remove();
})
Я ожидал, что имя переменной, такое как название города, которое является текстом, будет отображаться на линейном графике, когда я использую мышь для наведения этой линии, и если мышь перемещается на другую линию на том же линейном графике, то она покажет текущее имя переменной, которое является предыдущим именем переменной, исчезнет. Итак, я думаю, что, возможно, он может использовать методы «mouseover» и «mouseout» в этом случае, но теперь он не может ничего показывать, когда мышь наводит курсор на каждую строку, а также не выдает никакого сообщения об ошибке.