在mouseover事件上向d3餅圖添加更多文本

Question

我試圖弄清楚如何使用mouseover在餅圖上顯示更多文本，而不僅僅是綁定到餅圖的數據。 以下是我的功能代碼

function Pie(value,names){

svg.selectAll("g.arc").remove()

var outerRadius = 100;
        var innerRadius = 0;
        var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);

    var pie = d3.layout.pie();
    var color = d3.scale.category10();
    var arcs = svg.selectAll("g.arc")
              .data(pie(value))
              .enter()
              .append("g")
              .attr("class", "arc")
              .attr("transform", "translate(950,80)");

    arcs.append("path")
            .attr("fill", function(d, i) {
                return color(i);
            })
            .attr("d", arc)
            .on("mouseover",function(d,i) {
             arcs.append("text")
                .attr("dy", ".5em")
                .style("text-anchor", "middle")
                .style("fill", function(d,i){return "black";})
                .text(d.data)
            })

            .on("mouseout", function(d) {

                arcs.select("text").remove();
            });}

names數組的長度與傳遞給pie的value數組的長度相同。 我真的希望通過替換上面的mouseover來完成這樣的事情。

.on("mouseover",function(d,i) {
             arcs.append("text")
                .attr("dy", ".5em")
                .style("text-anchor", "middle")
                .style("fill", function(d,i){return "black";})
                .text(function(d,i){return (d.data +" " + names[i]);)
            })

但它唯一能做的就是顯示values數組的所有元素，一個堆疊在另一個的頂部，以及names數組的最后一個元素。 在這種情況下， i似乎總是最后一個索引。 我該怎么辦呢？ 我可以用其他方式顯示我想要的文字嗎？ 先感謝您。

Answer 1

首先，變量arcs是一個數據綁定的d3選擇，它代表餅圖的所有弧。 因此，通過調用arcs.append ，您將為餅圖的每個部分附加一個text元素。 我認為你的意思是只根據你所覆蓋的內容附加一個text元素，所以重寫為：

svg.append('text')
  ...

第二，在這個表達式中：

.text(function(d,i){return (d.data +" " + names[i]);)

鼠標懸停功能中的d和i已經表示被鼠標懸停的餅圖的數據和索引。 沒有理由將其包裝在另一個函數中並且應該重寫：

.text(d.data +" " + names[i]);

這是一個完整的例子：

 <!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 10px sans-serif; } .arc path { stroke: #fff; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var width = 960, height = 500, radius = Math.min(width, height) / 2; var color = d3.scale.category10(); var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(0); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.value; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var data = [{ value: Math.random(), }, { value: Math.random(), }, { value: Math.random(), }, { value: Math.random(), }, { value: Math.random(), }] var names = ["A","B","C","D","E"]; var arcs = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); arcs.append("path") .attr("d", arc) .style("fill", function(d,i) { return color(i); }) .on("mouseover", function(d, i) { console.log(d); svg.append("text") .attr("dy", ".5em") .style("text-anchor", "middle") .style("font-size", 45) .attr("class","label") .style("fill", function(d,i){return "black";}) .text(names[i]); }) .on("mouseout", function(d) { svg.select(".label").remove(); }); </script> </body> </html>

在mouseover事件上向d3餅圖添加更多文本

問題描述

1 個解決方案

解決方案1
3 已采納 2015-11-22 21:40:40

在mouseover事件上向d3餅圖添加更多文本

問題描述

1 個解決方案

解決方案1 3 已采納 2015-11-22 21:40:40

解決方案1
3 已采納 2015-11-22 21:40:40