在D3饼图中添加工具提示的问题

Question

I am using D3.js to build Pie chart. I am following this tutorial to build Pie chart in D3. Now I want to add tooltip in each of segment of pie chart.

I am trying to use callback to perform some event. Like this ..

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

Here if you can see I have added onMouseoverSegment event in callbacks which will trigger alert on mouseover.

Now The real thing. I want to show tooltip here with respective value on mouseover and remove that tooltip on mouseout. How can I do this ? please help.

Check JSFIDDLE

Answer 1

I haven't used the d3pie library you used as d3 already has a pie layout which works well. Here is a JSfiddle with a working version with your data. I couldn't at a glance see how to extend that library. It might be possible to use this example in the library at tooltips.

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

This code adds the title text to each svg path object which are the segments. If you want more fancy non-browser default tooltips look at this book on d3 which has a section on tooltips.

Fancy tooltips use event listeners using the selection.on() method with the 'mouseover' and 'mouseout' events. This can also be used for highlighting and other ways and are described in the above book. Which is well worth a read and explains a lot about how d3.js works.

Answer 2

The D3Pie library already has tooltips in-built. And they're pretty customizable too. All you need to do is enable them and they should appear just fine

Here's how it looks (from the d3pie website)

and here's the code you should add to enable it

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

See the api here for more customizations you can do