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

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

1 个答案: