D3ツールチップ内にドーナツチャートを追加する

Question

ツールチップ内にドーナツチャートを表示しようとしています。私は単に関数名を追加するか、.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'; }); 




    } 

Answer 1

あなたの機能donutChartは、身体への、ないツールチップ内<svg>を追加します。

ソリューションは、あなたの.html()でこれを書くことができます。その後、

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

そして、あなたのvar svgを変更するには覚えて、その行の後、あなたのdonutChartを呼び出す：

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

は、同じことを繰り返していないために注意してくださいたとえそれらが関数の中にあっても（別のスコープ）...それは不必要な混乱を引き起こす可能性があります。