Question

我想制作类似于example的工具提示，但在我的图表中，工具提示不会显示在每个栏的末尾。我试图通过调整offset([-10, 350]).来修复它我可以看到工具提示已移动，但并非所有工具提示都显示在最后。任何人都可以告诉我如何解决它？非常感谢！

<!DOCTYPE html>
<html>
<style>
.axis {
    font-family: Helvetica;
    font-size: 1em;
    font-weight: bold;
    color: #444444;
}
.axis path,
.axis line {
  fill: none;
  stroke: white;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}
.bar:hover {
  opacity: 0.7; 
}
.d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: #aaaaaa;
    color: #aa123f;
    border-radius: 6px;
    font-family: Helvetica;
      }
      /* Creates a small triangle extender for the tooltip */
.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: #aaaaaa;
    content: "\25BC";
    position: absolute;
    text-align: center;
 }
/* Style northward tooltips differently */
.d3-tip.n:after {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
}

</style>
  <head>   
    <!-- D3.js -->
    <script src='http://d3js.org/d3.v3.min.js'></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
  </head>
  <body>
  <div id="barChart"></div>  
    <script>
     var data = [
                {y:"Group1", x: 3.5},
                {y:"Group2", x: 4.5},
                {y:"Group3", x: 3.8}            
    ];   
    var margin = {top: 40, right: 20, bottom: 30, left: 80},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var x = d3.scale.
        linear().
        range([0, width]);
    var y = d3.scale.
        ordinal().
        rangeRoundBands([0, height], 0.3);  
    var xAxis = d3.
        svg.
        axis().
        scale(x).
        orient("bottom");
    var yAxis = d3.svg.axis().
        scale(y).
        orient("left");     
    x.domain([1, 5]);
    y.domain(data.map(function(d) { return d.y; }));    
    var tipBars = d3.tip().
        attr('class', 'd3-tip').
        offset([-10, 350]).
        html(function(d) {
            return '<strong style="color:grey">Result:</strong> <span style="color:grey">' + d.x +
              '</span>';
        });
    var svg = d3.select("#barChart").
        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 + ")");
    var plot = svg.
        append("g").
        attr('transform', 'translate(' + 0 + ',' + 0 + ')');        
    var plotBars = plot.selectAll("g").     
        data(data).
        enter().
        append("g").
        attr('class', 'bars');
    svg.call(tipBars);  
    var bars = plotBars.    
        append("rect").
        attr("x", function(d) { return 0; }).
        attr("width",function(d) { return x(d.x);}).
        attr("y", function(d) { return y(d.y);}).
        attr("height", y.rangeBand()).
        attr("class", "bar").
        attr("fill","grey").
        on('mouseover', tipBars.show).
        on('mouseout', tipBars.hide);   
    svg.append("g").
        attr("class", "x axis").
        style('font-family', ' Helvetica').
        call(xAxis);
    svg.append("g").
        attr("class", "y axis").
        style('font-family', ' Helvetica').
        call(yAxis);

    </script>
  </body>
</html>

Answer 1

使用d3.tip.direction()设置定位。 Docs

var tipBars = d3.tip()
    .attr('class', 'd3-tip')
    .direction('e')
    .html(function(d) {
        return '<strong style="color:grey">Result:</strong> <span style="color:grey">' + d.x +
          '</span>';
    });

修复水平条形图d3.js上的工具提示

1 个答案: