Question

我想在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;

}

当图表显示在＆＃34;正常＆＃34;文档中的div，它显示正确。

很抱歉，如果我的解释不明确，请在需要时向我询问一些细节。

由于西里尔

Answer 1

您正在设置div的HTML内容两次，因为highcharts会自行呈现它。在mouseover处理函数中，只需执行

即可

zoomCityComm(d);

而不是

tooltip.html(zoomCityComm(d));

感兴趣的是，这是发生了什么。从函数的返回值设置工具提示div的HTML捕获高图用于增长条形的第一个动画帧。因为它是第一个框架，所以条形的高度仍为0 - 也就是说，条形图在那里，但由于它们基本上没有高度而不可见。替换div的HTML意味着动画将不再起作用，因为已经替换了动画元素。

使用Highcharts生成时，D3.js工具提示不显示正确的数据

1 个答案: