javascript - D3在工具提示中添加甜甜圈图

我正在尝试在工具提示中显示一个甜甜圈图。我以为只是添加函数名称或在.html（）中创建图表，但事实并非如此。谁能告诉我我要去哪里错了？

这是我的代码：

tooltip.select('.label').html(donutChart());


function donutChart(){

    var dataset = {
      hddrives: [20301672448, 9408258048, 2147483648, 21474836480, 35622912,32212254720],
    };

    var width = 460,
        height = 300,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.ordinal()
        .range(["#2DA7E2"]);

    var pie = d3.layout.pie()
        .sort(null);

    var arc = d3.svg.arc()
        .innerRadius(radius - 100)
        .outerRadius(radius - 70);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var path = svg.selectAll("path")
        .data(pie(dataset.hddrives))
          .enter().append("path")
         .attr("class", "arc")
        .attr("fill", function(d, i) { return color(i); })
        .attr("d", arc);
    svg.append("text")
          .attr("dy", ".35em")
          .style("text-anchor", "middle")
          .attr("class", "inside")
          .text(function(d) { return 'Test'; });




    }

最佳答案

您的函数donutChart将<svg>附加到主体，而不是在工具提示内。

一个解决方案可以在您的.html()中编写：

.html("<h1>My Donut Chart</h1><br><svg class='myDonut'></svg>")

然后在该行之后致电您的donutChart，切记更改您的var svg：

var svg = d3.select(".myDonut")

注意不要重复相同的变量名，即使它们在函数内部（范围分开）也可能会导致不必要的混乱。

关于javascript - D3在工具提示中添加甜甜圈图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38010997/