D3甜甜圈圖JS JS Sankey圖

Question

我有一個D3 Js Sankey圖，有很多數據。數據的末尾總是公司。公司節點是一個簡單的圓圈。但是，在圓周圍我想要一個甜甜圈圖，有2個值。這些值在公司節點中是numsms和nummid。你也可以在下面的圖片中看到。該圖的

實施例：

，所以我想約於公司圓甜甜圈炭。但我似乎無法得到這項工作，我只找到甜甜圈字符的例子作爲自己的svg。

我的圈子

svg.selectAll(".node.circle") 
     .append("circle") 
     .attr("r", function(d) { 
      if(d.node.indexOf("company-") > -1) { 
       return company_circle_size(d); 
      } else { 
       return page_circle_size(d); 
      } 
     }) 
     .attr("cy", function(d) { return d.dy/2;}) 
     .attr("cx", function(d) { 
      var cx = sankey.nodeWidth() - 30; 
      if(d.node.indexOf("company-") > -1) { 
       cx = cx + 15; 
      } 
      return cx; 
     }) 
     .style("fill", function (d) { 
      if(d.node.indexOf("company-") > -1) { 
       if(d.name.indexOf("No data") > -1) { 
        return "grey"; 
       } 
       var color = ''; 
       switch(d.status) { 
        case 'Approved': 
         color = 'green'; 
         break; 
        case 'inactive ': 
         color = 'red'; 
         break; 
        case 'initial': 
         color = 'yellow'; 
         break; 
        case 'review': 
         color = 'blue'; 
         break; 
        default: 
         color = 'grey'; 
         break; 
       } 
       return color; 
      } 
      return "grey"; 
      //return d.color = color(d.name.replace(/ .*/, "")); 
     }) 
     .style("fill-opacity", ".9") 
     .style("shape-rendering", "auto") 
     .style("stroke", function (d) { 
      return d3.rgb(d.color).darker(2); 
     }) 
     .append("title") 
     .text(function (d) { 
      if(d.node.indexOf("company-") > -1) { 
       if(d.cpId != null) { 
        return d.name + "\n cpId: " + d.cpId; 
       } 
       return d.name; 
      } 
      return d.name + "\n" + format(d.value); 
     }); 

在爲LU的代碼我代替類名「節點圈」到「節點企業」。

$(selector).attr("class", "node company") 

我試過一些東西，我認爲代碼需要放在這裏。

svg.selectAll('.company').each(function(companyNode) { 
     var values = [[companyNode.numsms, companyNode.nummid]]; 
     var total = companyNode.numsms + companyNode.nummid; 

     if(total > 0) { 
      // create donut chart 
     } 
    }); 

Answer 1

您可以使用foriegnObject將節點追加到節點。在該div將您的值傳遞給內聯的jquery sparkline圖表（線，餅圖等）。設置div的透明度，以便它不會阻塞圖表。將你的值添加到原始的sankey數據數組（即source，target，value，numsms，numid），然後用d.numsms在後面調用它們。

//sparkline plugin and setup... http://omnipotent.net/jquery.sparkline/#s-docs 
//something like the following, look at the fiddle for more info 

node.append("foreignObject") 
.attr("width", sankey.nodeWidth()*2) 
.attr("height", function(d) { return d.dy/2 }) 
.attr("transform", function(d) { return "translate(" + (d.x+20) + "," + (d.y+10) + ")"; }) 
.append("xhtml:body") 
.style("font", "14px 'Helvetica Neue'") 
.html("<div>Inline Sparkline: <span class='inlinesparkline'>1,4,4,7,5,9,10</span></div>"); 

將div添加到每個節點後，調用該插件來激活嵌入式圖表。

$('.inlinesparkline').sparkline(); 

看看我的小提琴。這不是sankey，但它確實告訴你如何實現foriegnObject。

d3.js diagram with inline charts!

希望這有助於。

Answer 2

終於回到這個問題了。

這是一個quick example結合包含圓環圖的sankey圖。我不適合你的數據，這是一個通用的例子。

// if no pie data, just use rects as normal 
node.filter(function(d){ 
    return !d.pieData; 
    }) 
    .append("rect") 
    .attr("height", function(d) { 
    return d.dy; 
    }) 
    .attr("width", sankey.nodeWidth()) 
    .style("fill", function(d) { 
    return d.color = color(d.name.replace(/ .*/, "")); 
    }) 
    .style("stroke", function(d) { 
    return d3.rgb(d.color).darker(2); 
    }) 
    .append("title") 
    .text(function(d) { 
    return d.name + "\n" + format(d.value); 
    }); 

// set up donut chart stuff 
var pColor = d3.scale.ordinal() 
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

var arc = d3.svg.arc() 
    .outerRadius(50) 
    .innerRadius(20); 

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

// if we have pie data, draw the donut chart 
var g = node.filter(function(d){ 
    return d.pieData; 
    }) 
    .append("g") 
    .attr('transform', function(d,i){ 
    return 'translate('+d.dx/2+','+d.dy/2+')'; // proper position 
    }) 
    .attr("class","donut") 
    .selectAll(".arc") 
    .data(function(d){ 
    return pie(d.pieData); // nested selection to assign data 
    }) 
    .enter().append("g") 
    .attr("class", "arc"); 

g.append("path") 
    .attr("d", arc) 
    .style("fill", function(d,i) { return color(i); }); 

Answer 3

桑基+餅圖執行此：http://food.csaladen.es （雖然餅圖駐留在固定的div，所以移動你的節點上面每次喚起它）