Question

我正在尝试包含一个工具提示，当我将鼠标悬停在条形图中的条形图上并显示数据值时显示。我的工具提示正在运行，但我希望它出现在栏的正上方（根据数据的不同高度），我无法弄清楚如何做到这一点。

这是我的工具提示和数据：

var bardata = [10, 16, 7, 19, 18, 16, 23, 36, 31, 26, 20, 19, 23, 9, 26];

var margin = { top: 30, right: 30, bottom: 40, left:50 }

var height = 400 - margin.top - margin.bottom,
    width = 900 - margin.left - margin.right,
    barWidth = 30,
    barOffset = 0;

var yScale = d3.scale.linear()
    .domain([0, d3.max(bardata)])
    .range([0, height]);

var xScale = d3.scale.ordinal()
    .domain(['<10 (neg)','10-1 (neg)','0-10','11-20','>20'])
    .rangeBands([0, width], 0)

var tooltip = d3.select('body').append('div')
    .style('position', 'absolute')
    .style('font-size', '13px')
    .style('font-color','#6A0BC1')

这里是我将数据添加到我的svg元素的地方：

var myChart = d3.select('#chart').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate('+ margin.left +', '+ margin.top +')')
  .selectAll('rect').data(bardata)
  .enter().append('rect')
      .style('fill', function(d,i) {
            if (i==0 || i==3 || i==6 || i==9 || i==12) {
                return '#a66dda';
            } else if (i==1 || i==4 || i==7 || i==10 || i==13) {
                return '#c39de6';
            } else {
                return '#e1cef3';
            }
            })
        .style('opacity', 0.6)
    .attr('width', barWidth)
    .attr('x', function(d,i) {
        if (i>2 && i<=5) {
            return i * (barWidth + barOffset) + 112;
        } else if (i>5 && i<=8) {
            return i * (barWidth + barOffset) + 185;
        } else if (i>8 && i<=11) {
            return i * (barWidth + barOffset) + 259;
        } else if (i>11 && i<=14) {
            return i * (barWidth + barOffset) + 333;
        } else {
            return i * (barWidth + barOffset) + 38;
        }
    })
    .attr('height', 0)
    .attr('y', height)

.on('mouseover', function(d,i) {

    if (i%3 == 0) {
             US_hover();
        } else if (i%3 == 1) {
             Germany_hover();
        } else {
             UK_hover();
        };


    tooltip.transition()
        .style('opacity', .9)

    tooltip.html(d+'%')
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");  

    tempColor = this.style.fill;
    d3.select(this)
        .style('fill', 'white')
        .style('stroke', '#6A0BC1')

        .style('stroke-width', '2px')

有人可以帮我找到我打电话/选择的内容，以便让数据显示在相应的条形图上方，并且每次都在同一个地方吗？提前谢谢。

D3工具提示帮助：如何在条形图中找到条形图的y位置？

0 个答案: