D3饼图工具提示和动画问题

Question

Below is my code that initialises a pie chart. The problem I'm having is adding a tooltip and animation. I want to be able to hover over a slice on my pie chart and that slice should enlarge with a brief description (tooltip) of the data represented:

Code:

 <!-- contains the data that will be plotted on my pie chart --> var data = [5, 6, 7, 8, 9, 10, 11, 12]; var radius = 500; var color = d3.scale.ordinal(.range(['#00FFFF', '#32CD32', '#1E90FF', '#FF4500', '#FFD700', '#FF7F50', '#DC143C', '#0000FF']); <!-- base container that will hold the pie chart. --> <!-- allows you to add function to the graph --> var container = d3.select("body").append("svg") .attr("width", 1000) .attr("height", 1000) <!-- making proper adjustments to the container --> var group = container.append("g") .attr("transform", "translate(500, 500)"); <!-- arc is the base and shape of the pie chart--> <!-- it contains an inner.radius, outer.radius--> var arc = d3.svg.arc() .innerRadius(0) .outerRadius(radius - 100); var pie = d3.layout.pie() .value(function(d) { return d; }); <!-- grouping and binding my data to the pie chart --> var arcs = group.selectAll(".arc") .data(pie(data)) <!-- passes data to pie layout--> .enter() .append("g") .attr("class", "arc"); <!-- each color represents a number from the data--> <!-- creating a path arcs .append("path") .attr("d", arc) .attr("fill", function(d) { return color(d.data); }); container.selectAll("slice") .data(pie(data)) .enter() .attr("class", "slice") .attr("d", path) var slices = container.selectAll(".slice") .data(pie(data)) .enter(); slices .append("path") .attr("class", function(d) { return "slice" + color(d.data); }) .attr("d", path) .on("mousemove", function(d) { var slicecolor = this; d3.select(this).style("opacity", 1); .on("mouseout", function(d) { d3.selectAll("path") .style({ "opacity": 0.5 }); }); 

 .slice { stroke: black; stroke-width: 1px; } .slice:hover { fill: aliceblue; } .hidden { display: none; } div.tooltip { border-width: 1px; border-radius: 25px; padding: 50px; color: #549CFF; position: absolute; text-align: left; left: 80px; opacity: 0.5; } 

 <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 

Answer 1

This looks like an error

d3.select(this).style("opacity", 1); // <= errant semi-colon
        .on("mouseout", function(d) {
            d3.selectAll("path")
                .style({"opacity":0.5});
        });