在D3餅圖中制作可滾動的工具提示

Question

我在d3.js中使用d3pie。 當我將鼠標懸停在餅圖上時，我會看到帶有數據的工具提示，但是由於數據太長，其余數據被切除/隱藏了。

我想在單擊餅圖時顯示一條可滾動的網關列表，就像工具提示一樣。

這是我的代碼。

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
})