修復水平條形圖上的工具提示d3.js

我想創建一個類似的工具提示，如example，但在我的圖表中，工具提示不顯示在每個條的末尾。我試圖通過調整offset([-10, 350]).來解決它我可以看到移動的工具提示，但不是所有的都出現在最後。任何人都可以告訴我如何解決它？非常感謝！修復水平條形圖上的工具提示d3.js

<!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>

來源

2016-01-25 crazier

使用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>'; 
    });

來源

2016-01-25 18:45:49 elsherbini

修復水平條形圖上的工具提示d3.js

回答

相關問題