在d3餅圖中製作可滾動的工具提示

我正在使用d3pie與d3.js。當我將鼠標懸停在餅圖上時，我看到了包含數據的工具提示，但其餘數據被切斷/隱藏，因爲數據太長了。在d3餅圖中製作可滾動的工具提示

我想顯示一個可滾動的網關列表，當點擊餡餅就像一個工具提示。

這裏是我的代碼。

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: { 
     } 
    });

來源

2016-01-21 Sushant Bajracharya

你有工作小提琴嗎？ –

https://jsfiddle.net/pgnv61f4/#&togetherjs=4ftcwNKMNA –

請添加一個示例，您可以在其中顯示實際問題。數據量大的地方。 –

我會建議創建一個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 
})

來源

2016-01-21 09:25:50 thatOneGuy

如果你想多個div，所以div留在一個地方，只需將鼠標懸停的關聯div的不透明度更改爲1 （餅圖的一部分），並在鼠標移動不透明度爲0 – thatOneGuy

它也可以工作onClick事件嗎？ http://d3pie.org/#docs我想在'callbacks.onClickSegment'中實現它 –

是的。只需在點擊餅圖時調用點擊事件即可。生病回答 – thatOneGuy

在d3餅圖中製作可滾動的工具提示

回答

相關問題