D3円グラフのツールチップとアニメーションの問題

Question

以下は、円グラフを初期化するコードです。私が持っている問題は、ツールチップとアニメーションを追加することです。私は私の円グラフでスライスを上にマウスを移動できるようにしたいと、そのスライスが表現されたデータの簡単な説明（ツールチップ）を拡大する必要があります

コード：

<!-- 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 \t 
 
    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

これはエラーのようです

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