D3 JS Sankey图中的圆环图答案

【问题标题】：Donut chart in D3 JS Sankey diagramD3 JS Sankey图中的圆环图
【发布时间】：2015-04-16 11:52:42
【问题描述】：

我有一个 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);
        });

在 for 循环中，我将类名“node circle”替换为“node company”。

$(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
        }
    });

【问题讨论】：

请用您的数据示例更新您的问题。如果无法重新创建一个完整的示例，很难回答这个问题......
代码太大，包含对服务器的嵌套项。因此，如果不更改太多代码，我就无法制作 jsfdle。这个问题还有很多不必要的代码。如果您指的是 JSON 字符串中的数据，那么我有这个：jsfiddle.net/Mithek/f5e6L2su 我把它放在一个 jsfiddle 中，因为它是一个相当长的字符串。

标签： javascript svg d3.js sankey-diagram

【解决方案1】：

您可以使用 foriegnObject 将 div 附加到节点。在该 div 中，将您的值传递给内联 jquery 迷你图（折线、饼图等）。设置 div 的透明度，使其不会阻塞图表。将您的值添加到原始 sankey 数据数组（即源、目标、值、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!

希望这会有所帮助。

【讨论】：

谢谢，它已经在帮助了。如果有效，我会及时通知您。如果我有其他提示/方法。

【解决方案2】：

终于回到了这个问题。

这是一个quick example，结合了一个包含圆环图的桑基图。我不适合您的数据，这是一个通用示例。

// 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); });

【讨论】：

【解决方案3】：

Sankey + Piechart 在这里实现：http://food.csaladen.es （虽然饼图驻留在静态 div 中，所以每次调用它时都将它移到节点上方）

【讨论】：