Подсказки показываются в неправильном положении - PullRequest
Новая
       24

Подсказки показываются в неправильном положении

1 голос
/ 17 июня 2019

У меня есть три графика в разных позициях.Подсказки выглядят хорошо для моего первого графика, но для двух других всплывающие подсказки показаны на первом графике.

Я пробовал BBbox и getboundindclientrect(), и ни один из них не работает для d3.select(this).

// Это мой модуль диаграммы, я изо всех сил пытаюсь получить правильные значения xPosition и yPosition.

function chart(selection) {

    innerWidth = width - margin.left - margin.right,
    innerHeight = height - margin.top - margin.bottom,

    selection.each(function (data) {

      // Select the svg element, if it exists.
      var svg = d3.select(this).selectAll("svg").data([data]);

      // Otherwise, create the skeletal chart.
      var svgEnter = svg.enter().append("svg");
      var gEnter = svgEnter.append("g");
      gEnter.append("g").attr("class", "x axis");
      gEnter.append("g").attr("class", "y axis");

      // Update the outer dimensions.
      svg.merge(svgEnter).attr("width", width)
        .attr("height", height);

      // Update the inner dimensions.
      var g = svg.merge(svgEnter).select("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


      xScale.rangeRound([0, innerWidth])
        .domain(data.map(xValue)); //xValue = function(d) { return d[0]; }
      yScale.rangeRound([innerHeight, 0])
        .domain([0, d3.max(data, yValue)]);

      g.select(".x.axis")
          .attr("transform", "translate(0," + innerHeight + ")")
          .call(d3.axisBottom(xScale));

      g.select(".y.axis")
          .call(d3.axisLeft(yScale).ticks(10))
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", "0.71em")
          .attr("text-anchor", "end")
          .text("Frequency");

      var bars = g.selectAll(".bar")
        .data(function (d) { return d; });

      bars.enter().append("rect")
          .attr("class", "bar")
        .merge(bars)
          .attr("x", X) // function X(d) {return xScale(xValue(d));}
          .attr("y", Y)
          .attr("width", xScale.bandwidth())
          .attr("height", function(d) { return innerHeight - Y(d); })
          .attr("fill", "rgb(0, 18, 65") // International Klein blue
          .on("mouseover", function(d) {

            //Get this bar's x/y values, then augment for the tooltip
            var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.bandwidth()/2; // + parseFloat(bars.node().getBBox().x);
            var yPosition = parseFloat(d3.select(this).attr("y"))/2 + innerHeight/2;

            //Update the tooltip position and value
            d3.select("#tooltip")
                .style("left", xPosition + "px")
                .style("top", yPosition + "px")                     
                .select("#value")
                .text(yValue(d));

            //Show the tooltip
            d3.select("#tooltip").classed("hidden", false);
          })
          .on("mouseout", function() {

            //Hide the tooltip
            d3.select("#tooltip").classed("hidden", true);
          })
          .on("click", onClick);

      bars.exit().remove();
    });

  }

Я бы хотел, чтобы при наведении на них курсора всплывала подсказка.

1 Ответ

0 голосов
/ 17 июня 2019

В этой строке: 

d3.select("#tooltip")

Ваш выбор с идентификацией (#), поэтому вы получаете первое вхождение в DOM.Вот почему вы манипулируете только первой подсказкой.

...