Question

我正在开发一个应用程序来为我制作一个条形图，我想要它，以便当一个条形图悬停时，将显示详细信息。我已经在网站的其余部分使用Bootstrap，所以尽管我在这里使用了工具提示功能。但是，我无法让这个工作。我曾尝试将容器更换为机身，但它没有任何区别。有人可以确定我的工具提示没有显示的原因。非常感谢任何帮助。

<div id="chart" class="col-md-8">
    <svg id="svgContainer" ></svg>
</div>

<script>
$(document).ready(function(){
  $(".bar").tooltip({
  'container': 'body',
  'placement': 'left',
  'trigger': 'hover',
  'title': 'tooltips'
});
});

window.onload = function () {
var width = $('#chart').width(),
height = $('#chart').height(),
svgContainer = d3.select("#svgContainer");
svgContainerAttributes = svgContainer
    .attr("width", width)
    .attr("height", height)

d3.text(path, function(data) {
    var csvData = d3.csv.parseRows(data),
    barWidth = (width*0.95 / (csvData.length - 1)) * 0.75,
    barOffset = barWidth / 4;

    //extract axis titles and then remove from data
    var xTitle = csvData[0][0];
    var yTitle = csvData[0][1];
    csvData.splice(0,1);

    var min = findMin(csvData),
    max = findMax(csvData);

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

    var barGroup = svgContainer.append("g").attr("transform", "translate("+width*0.05+",-"+height*0.05+")"); //shift bars up 5% to make room at bottom for bar titles

    var bars = barGroup.selectAll("rect")
        .data(csvData)
        .enter()
        .append("rect")

    var barsAttributes = bars
        .attr("width", barWidth)
        .attr("height", function (d,i) { return yScale(+csvData[i][1]); })
        .attr("x", function (d,i) { return i * (barWidth + barOffset)+ barOffset})
        .attr("y", function (d,i) { return height - yScale( +csvData[i][1] ) })
        .attr("fill", "#0033cc")
        .attr("class", "bar")
        .style("stroke", "black")
        .style("stroke-width", "2")
})

}
</script>

Answer 1

我建议使用鼠标悬停事件来触发工具提示。像这样：

var bars = barGroup.selectAll("rect")
        .data(csvData)
        .enter()
        .append("rect")
        .on("mouseover", function(){
            //run your tool tip code.
        });

使用带有SVG对象的Bootstrap工具提示 - 不显示尽管指定了Container

1 个答案: