Как отобразить имя каждой переменной на многострочном графике при использовании наведения и наведения мыши?(D3.js) - PullRequest
0 голосов
/ 07 июня 2019

Я хотел бы показать каждое имя переменной, которое является текстом, когда мышь наведет курсор на линию, и я использовал методы 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» в этом случае, но теперь он не может ничего показывать, когда мышь наводит курсор на каждую строку, а также не выдает никакого сообщения об ошибке.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...