Создание прокручиваемой всплывающей подсказки в круговой диаграмме d3

Question

Я использую d3pie с d3.js. Когда я нависаю над пирогом, я вижу всплывающую подсказку с данными, но остальные данные обрезаются/скрываются, потому что данные слишком длинны.

Я хочу показать прокручиваемый список шлюзов при нажатии на пирог, как всплывающая подсказка.

вот мой код.

var pie = new d3pie("gateway-datasources-status-chart", { 
     size: { 
      canvasHeight: 300, 
      canvasWidth: 300 
     }, 
     data: { 
      content: [ 
       { label: "Online", value: online_gateway, lists: online_gateway_datasources }, 
       { label: "Offline", value: offline_gateway, lists: offline_gateway_datasources } 
      ] 
     }, 
     "tooltips": { 
      "enabled": true, 
      "type": "placeholder", 
      "string": "{label}: {lists}", 
      "styles": { 
       "backgroundColor": "#040404", 
       "borderRadius": 5 
      } 
     }, 
     callbacks: { 
     } 
    }); 

Answer 1

Я бы рекомендовал создать div, поскольку svg не позволяет прокручивать. Вот пример: http://bl.ocks.org/d3noob/a22c42db65eb00d4e369

В основном добавить DIV:

var div = d3.select("body").append("div") 
    .attr("class", "tooltip")    
    .style("opacity", 0); 

Тогда при наведении курсора мыши, переместите DIV туда, где мышь и изменить текст в Div в:

.on("mouseover", function(d) {  
      div.transition()   
       .duration(200)  //so it fades in 
       .style("opacity", .9);  
      div .html(formatTime(d.date) + "<br/>" + d.close) 
       .style("left", (d3.event.pageX) + "px")  
       .style("top", (d3.event.pageY - 28) + "px");  
      })     
     .on("mouseout", function(d) {  
      div.transition()   
       .duration(500)  //so it fades out 
       .style("opacity", 0); 
     });  

Для этого по клику:

pieChart.on("click",function(d){ 
//show tooltip 
})