0

我想在我的 d3 地图中显示一些工具提示。工具提示是 Highcharts 生成的关于所选城市的柱形图。诀窍是一切都正确显示（轴，标签......），除了列不可见！

这是我的 d3 代码（仅相关部分）：

var tooltip = d3.select("body")
    .append("div")
    .attr("id","tooltip")
    .style("position", "absolute")
    .style("visibility", "hidden");

cities.on("mouseover", function(d, i) {
    d3.select(this).style('fill', '#95a5a6');
    tooltip.html(zoomCityComm(d))
    return tooltip.style("visibility", "visible")})
   .on("mousemove", function(d, i){
   return tooltip.style("top", (d3.event.pageY - 130) + "px").style("left",(d3.event.pageX - 120) + "px");

})
}

函数 zoomCityComm 是 HighCharts（数据示例：[5,10]）：

function zoomCityComm(d) {

    chart = new Highcharts.Chart({
    chart : {
        renderTo: 'tooltip',
        type: 'column',
        width:200,
        height:200,
        plotBackgroundColor: '#FCFFC5',
        zoomType: 'xy'
        },
        title: {
        text: "TOTO"
    },
    legend: {
     enabled: false
    },  
        xAxis: {
     categories: ['In','Out']
    },
    yAxis: {
    title: {
         text: 'Sum',
         style: {
             color: '#4572A7'
         }
    },
    labels: {
        style: {
        color: '#4572A7'
        }
    },

},
series:[{color: '#4572A7',data: res}]
        });

return document.getElementById("tooltip").innerHTML;

}

当图表显示在文档中的“正常”div 中时，它会正确显示。

对不起，如果我的解释不清楚，但如果需要，请向我询问一些细节。

谢谢西里尔

4

1 回答 1

1

您正在设置div两次的 HTML 内容，因为 highcharts 会自行呈现。在您的mouseover处理程序函数中，这样做就足够了

zoomCityComm(d);

代替

tooltip.html(zoomCityComm(d));

对于感兴趣的人，这就是正在发生的事情。从函数的返回值设置工具提示的 HTML 会div捕获 highchart 用于增长条形的第一个动画帧。因为它是第一帧，所以条的高度仍然是 0——也就是说，条存在，但不可见，因为它们基本上没有高度。替换 HTMLdiv意味着动画将不再起作用，因为将动画的元素已被替换。

于 2013-09-09T18:11:43.133 回答