Question

我正在尝试将图例添加到我创建的饼图以及您可以将鼠标悬停在某个部分上的交互式功能。这就是我到目前为止所拥有的。到目前为止，图例和工具提示仍然没有真正起作用。图例应对应于饼图，悬停应显示数字。也许我呈现数据的方式可能有问题，但为了让所有这些属性显示在页面上，任何更改都是好的。

代码笔链接：https://codepen.io/irwinmier96/pen/QWKBWRE

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Interactive</title>

  <!-- Bootstrap core CSS -->
  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom styles for this template -->
  <link href="css/modern-business.css" rel="stylesheet">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
</head>

<body>

 <svg width="300" height="300"> 
    </svg>

    <script>

        var data = [600,1800,300,500]; 
        
        // Selecting SVG using d3.select() 
        var svg = d3.select("svg"); 
            
        // Creating Pie generator 
        var pie = d3.pie(); 

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

        let g = svg.append("g") 
                    .attr("transform", "translate(150,120)"); 

        // Grouping different arcs 
        var arcs = g.selectAll("arc") 
                    .data(pie(data)) 
                    .enter() 
                    .append("g"); 

        // Appending path  
        arcs.append("path") 
            .attr("fill", (data, i)=>{ 
                let value=data.data; 
                return d3.schemeSet3[i+1]; 
            }) 
            .attr("d", arc); 
            
        // Adding data to each arc 
        arcs.append("text") 
            .attr("transform",(d)=>{  
                    return "translate("+  
                    arc.centroid(d) + ")";  
            }) 
            .text(function(d){ 
                return d.data;  
                }); 

 // Draw legend
        var legend = svg.selectAll(".legend")
        .data(colors)
        .enter().append("g")
        .attr("class", "legend")
        .attr("transform", function(d, i) { return "translate(30," + i * 19 + ")"; });
        
        legend.append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", function(d, i) {return colors.slice().reverse()[i];});
        
        legend.append("text")
        .attr("x", width + 5)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "start");

// Prep the tooltip bits, initial display is hidden
        var tooltip = svg.append("g")
        .attr("class", "tooltip")
        .style("display", "none");
            
        tooltip.append("rect")
        .attr("width", 30)
        .attr("height", 20)
        .attr("fill", "white")
        .style("opacity", 0.5);

        tooltip.append("text")
        .attr("x", 15)
        .attr("dy", "1.2em")
        .style("text-anchor", "middle")
        .attr("font-size", "12px")
        .attr("font-weight", "bold");
           

    </script>

为 D3 饼图添加图例和交互式工具提示

0 个答案: