Question

我正在使用d3js绘制地图，当我将鼠标悬停在某个省时，它应该显示使用plotly绘制的城市饼图。但是它没有显示它。

现在，我添加了一个工具提示，可以正确显示省名，但是当我通过另一个ID为ChartDiv的div时，它不会显示图形。当我将鼠标悬停在工具提示div中的div上时，事实消失了。

<style>
#tooltip, #ChartDiv{
  position: absolute;
  text-align: center;
  padding: 4px;
  background: #d22424;
  border: 0px;
  pointer-events: none;
}
</style>
<body>
   <div id = 'tooltip' style="display: none">
       <div id="ChartDiv"></div>
   </div>
<script>
//When mouseover on province
function mouseover(d){
          tooltip.transition()
          .duration(200);
            tooltip.html(map_chart(mapData,prov_name))
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 50) + "px")
            .style("opacity", 1)
            .style('display','block');
        }
//When mouseout on province
        function mouseout(){
          tooltip.transition()
            .duration(500)
            .style("opacity", 0);
        }

//Plotly Graph
            var data = [{
                values: ValArr,
                labels: LabelArr,
                sort: false,
                type: 'pie'
              }];
             Plotly.newPlot('ChartDiv', data, {}, {showSendToCloud:false})
</script>
</body>

我希望该图显示在全省范围内。但是当我尝试上述方法时，它只是删除了div ChartDiv，因此出现此错误，找不到ID为ID的图表元素。

这是小提琴：https://jsfiddle.net/inshalsaleem/vdag3qLu/2/

关于这个问题，请帮助我。

当悬停在省地图上时，工具提示中未显示图形

0 个答案: