D3插入提示

Question

我想一個提示（不知道是否是可能的，雖然...）中插入一個餅圖，並結束了與下面的代碼中的圖表：

var tip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(
     function(d) { if (d.company == "A" || d.company == "B") { 
      return "Company: <span style='color:#ccff33'>" + d.company+ " </span>"; 
     } 

      else { 

      var data = [60,40]; 
      var r = 100; 

      var color = d3.scale.ordinal() 
       .range(["blue", "orangered"]); 

      var base = d3.select(this) 

      var svg = base.append("svg") 
       .attr("width", 500) 
       .attr("height", 500); 

      var group = svg.append("g") 
       .attr("transform", "translate(30, 30)"); 

      var arc = d3.svg.arc() 
      .innerRadius(10) 
      .outerRadius(r); 

      var pie = d3.layout.pie() 
       .value(function (d) { return d;}); 

      var arcs = group.selectAll(".arc") 
       .data(pie(data)) 
       .enter() 
       .append("g") 
       .attr("class", "arc"); 

      arcs.append("path") 
       .attr("d", arc) 
       .attr("fill", function (d) { return color(d.data); }) 



      } 
     } 



); 

baseSvg.call(tip); 

第一與文本聯繫工作正常，但應該畫餅圖的Else部分不返回任何內容，我已經掙扎了幾天。我認爲我的錯誤來自選擇部分，但無法弄清楚。 我需要在工具提示中彈出餅圖。

非常感謝您的幫助。

Answer 1

「但應借鑑餅圖不返回任何else部分」

這正是爲什麼失敗，則函數返回空值，然後清除工具提示的HTML屬性，覆蓋你剛剛精心放置什麼在小費內。

試試這個在你的代碼的末尾：

return base.html(); 

那你只是把工具提示的一切變成了一個HTML字符串，該提示將隨後在現有（和相同）HTML複製。