D3 Sankey图使用圆节点而不是矩形节点 [英] D3 Sankey chart using circle node instead of rectangle node

问题描述

我想使用 Sankey 图表，但使用圆形而不是矩形。

这只是一个基本的Sankey例子。我包括数据，和janks中的Sankey插件代码。这只是为了方便，因为jsfidle没有合适的方法包括多个文件。所以，这里是：

---

步骤1

让我们更改此代码：

  //为节点添加矩形
 node.append（rect）
 .attr（height，function（d）{
 return d.dy; 
}）
 .attr（width，sankey.nodeWidth（））
  

到此代码：

  //为节点添加圈子
 node.append（circle）
 .attr（cx，sankey.nodeWidth（）/ 2）
 .attr（cy，function（d）{
 return d.dy / 2; 
} 
 .attr（r，function（d）{
 return Math.sqrt（d.dy）; 
}）
  

我选择使用Math.sqrt（），因为这种方式圆的面积将与它所代表的值成正比。

结果是这里：

---

< h2>步骤2

链接现在非自然地宽。

让我们改变这个代码：

  .style（stroke-width，function（d）{
 return Math.max（1，d.dy）; 
}）
 
 <$ c> 
 $ c> .style（stroke-width，function（d）{
 return Math.max（1，Math.sqrt（d.dy））; 
}）
  
结果在这里：
 
 
 
  
 
 
 
 
 
 
步骤3  
 
 
现在让我们修复链接的端点。
 
 
 
我将使用 
 
I want to use Sankey chart but with circle's instead of rectangles.

I am following the example from Mike Bostock.

I changed the code there to use circle by setting radius, but how to place the lines connecting nodes around circle. 

Any clue.



Thanks.
解决方案
first of all, I would like to tell you that I liked your idea.

I will walk you through several simple steps needed to get a decent Sankey diagram with circles. The final result may not be ideal for your application, but I guess it may be useful for you as starting point. Once you get to know internal and external features of d3 Sankey plugin, you should be able to build exactly what you design and wish.



Starting Point

link to jsfiddle

This is just a basic Sankey example. I included data, and Sankey plugin code within jsfiddle. This is just for convenience, since jsfidle doesnt have suitable method for including multiple files. So, here it is:





Step 1

Now we'll do what you already did - convert rectangles to circles.

Let's change this code:
// add the rectangles for the nodes
node.append("rect")
    .attr("height", function (d) {
        return d.dy;
    })
    .attr("width", sankey.nodeWidth())
to this code:
// add the circles for the nodes
node.append("circle")
    .attr("cx", sankey.nodeWidth()/2)
    .attr("cy", function (d) {
        return d.dy/2;
    })
    .attr("r", function (d) {
        return Math.sqrt(d.dy);
    })
I chose to use Math.sqrt() because that way area of the circle will be proportional to the value it represents. I think thi is the most natural choice for circle.

The result is here: 





Step 2

Links are now unnaturally wide. Let change their width to be proportional to square root of the flow they represent.

Let's change this code:
    .style("stroke-width", function (d) {
        return Math.max(1, d.dy);
    })
to this code:
    .style("stroke-width", function (d) {
        return Math.max(1, Math.sqrt(d.dy));
    })
Result is here:





Step 3

Now let's fix endpoints of links.

I will use code from this answer to another SO question.

This code:
var path = sankey.link();
is replaced with this one:
var path = d3.svg.diagonal()
    .source(function(d) { return {"x":d.source.y, "y":d.source.x}; })            
    .target(function(d) { return {"x":d.target.y, "y":d.target.x}; })
    .projection(function(d) { return [d.y, d.x]; });
Result is here:





Step 4

Now links link origins of the nodes, but we need them to connect centers of our circles 

Thatt's why we'll change this code:
var path = d3.svg.diagonal()
    .source(function(d) { return {"x":d.source.y, "y":d.source.x}; })            
    .target(function(d) { return {"x":d.target.y, "y":d.target.x}; })
    .projection(function(d) { return [d.y, d.x]; });
    .attr("width", sankey.nodeWidth())
to this code:
var path = d3.svg.diagonal()
    .source(function(d) {
        return {"x":d.source.y + d.source.dy / 2,
                "y":d.source.x + sankey.nodeWidth()/2};
    })            
    .target(function(d) {
        return {"x":d.target.y + d.target.dy / 2,
                "y":d.target.x + sankey.nodeWidth()/2};
    })
    .projection(function(d) { return [d.y, d.x]; });
The result is here:



Step 5

Almost done. What still bothers me in the last diagram is position of node labels. If circle is larger, it will overlap with its label. I fixed that in this last version. Result is:



And here is jsfidle of this final step

                        
这篇关于D3 Sankey图使用圆节点而不是矩形节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！