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("<h1>My Donut Chart</h1><br><svg class='myDonut'></svg>") 

을 다음 var svg 변경 기억, 그 선 후 donutChart 전화 :

해결책은 .html()이를 작성 할 수 있습니다 같은 반복하지 않는

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

받아 치료를 변수 이름이 함수 내에 있더라도 (별도의 범위) ... 불필요한 혼란을 야기 할 수 있습니다.