Question

我在不同位置有3张图表。工具提示在我的第一个图表中看起来不错，但在其他两个图表中，工具提示显示在第一张图表中。

我已经尝试了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();
    });

  }

当我将鼠标放在矩形上方时，我想在矩形上方获得工具提示。

Answer 1

在这一行：

d3.select("#tooltip")

您的选择带有标识（＃），因此您在DOM中首次出现。这就是为什么只操作第一个工具提示的原因。

工具提示显示的位置错误

1 个答案: