在D3餅圖中添加工具提示的問題

Question

我正在使用D3.js構建餅圖。 我正在按照本教程在D3中構建餅圖。 現在，我想在餅圖的每個分段中添加工具提示。

我正在嘗試使用回調執行一些事件。 像這樣 ..

<script>
  var pie = new d3pie("pieChart", {
"header": {
    "title": {
        "text": " ",
        "fontSize": 24,
        "font": "open sans"
    },
    "subtitle": {
        "text": " ",
        "color": "#999999",
        "fontSize": 12,
        "font": "open sans"
    },
    "titleSubtitlePadding": 9
},
"footer": {
    "color": "#999999",
    "fontSize": 10,
    "font": "open sans",
    "location": "bottom-left"
},
"size": {
    "canvasWidth": 590
},
"data": {
    "sortOrder": "value-desc",
    "content": [
        {
            "label": "Google",
            "value": 264131,
            "color": "#D78902"
        },
        {
            "label": "Twitter",
            "value": 118812,
            "color": "#04C3FD"
        },
        {
            "label": "Facebook",
            "value": 157618,
            "color": "#0457FD"
        },
        {
            "label": "Yahoo",
            "value": 114384,
            "color": "#FD0404"
        }
    ]
},
"labels": {
    "outer": {
        "pieDistance": 32
    },
    "inner": {
        "hideWhenLessThanPercentage": 3
    },
    "mainLabel": {
        "fontSize": 11
    },
    "percentage": {
        "color": "#ffffff",
        "decimalPlaces": 0
    },
    "value": {
        "color": "#adadad",
        "fontSize": 11
    },
    "lines": {
        "enabled": true
    }
},
"effects": {
    "pullOutSegmentOnClick": {
        "effect": "linear",
        "speed": 400,
        "size": 8
    }
},
"misc": {
    "gradient": {
        "enabled": true,
        "percentage": 100
    }
},
callbacks: {
    onMouseoverSegment: function(info) {
        alert("hi");
    }
}
});
</script>

在這里，如果您可以看到我在回調中添加了onMouseoverSegment事件，該事件將在鼠標懸停時觸發警報。

現在是真實的東西。 我想在此處顯示帶有鼠標懸停時相應值的工具提示，並在鼠標懸停時刪除該工具提示。 我怎樣才能做到這一點 ？ 請幫忙。

檢查JSFIDDLE

Answer 1

我沒有使用過您使用的d3pie庫，因為d3已經具有一個餅狀布局，可以很好地工作。 這是一個包含數據的工作版本的JSfiddle 。 我一眼看不到如何擴展該庫。 可以在工具提示中的庫中使用此示例。

  g.append("path")
  .attr("d", arc)
  .style("fill", function(d) { return d.data.color; })
  .append('title')
  .text(function(d){return d.data.value})

此代碼將標題文本添加到每個svg路徑對象（即段）。 如果您想了解更多非瀏覽器默認的工具提示，請參閱d3上的這本書，其中有關於工具提示的部分。

花哨的工具提示將事件偵聽器與select.on（）方法一起用於“ mouseover”和“ mouseout”事件。 這也可以用於突出顯示和其他方式，並在上本書中進行了描述。 值得一讀並解釋了d3.js的工作原理。

Answer 2

D3Pie庫已經內置了工具提示。 而且它們也非常可定制。 您需要做的就是啟用它們，它們應該看起來很好

外觀如下（來自d3pie網站）

這是您應該添加以啟用它的代碼

"tooltips": {
            "enabled": true,
            "type": "placeholder",
            "string": "{label}: {value} ({percentage}%)",
            "styles": {
                "backgroundColor": "#040404",
                "borderRadius": 5
            }
        }

請參閱此處的api ，以了解更多可定制的信息