在D3饼图中制作可滚动的工具提示

Question

I am using d3pie with d3.js. When I hover over the pie I see the tooltip with the data but the rest of the data is cut off/ hidden because the data is way too long.

I want to show a scrollable list of gateways when clicked on the pie just like a tooltip.

here is my code.

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

I would recommend creating a div as svg doesn't allow scroll. Here is an example : http://bl.ocks.org/d3noob/a22c42db65eb00d4e369

Basically add a div :

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

Then on mouseover, move the div to where the mouse is and change the div's text :

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

To do this on click :

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