SOURCE

console 命令行工具 X clear

                    
>
console
var data = {
  'nodes': [
    {name: "0"},
    {name: "1"},
    {name: "2"},
    {name: "3"},
    {name: "4"},
    {name: "5"},
    {name: "6"},
    {name: "7"},
    {name: "8"}
  ],
  'links': [
    {source: 0, target: 3, value: 10},
    {source: 1, target: 4, value: 10},
    {source: 2, target: 4, value: 5},
    {source: 1, target: 5, value: 5},
    {source: 3, target: 6, value: 5},
    {source: 3, target: 7, value: 5},
    {source: 4, target: 7, value: 10},
    {source: 4, target: 8, value: 5},
    {source: 5, target: 8, value: 5}
  ]
};
var width = 700;
var height = 600;
var svg = d3.select('#app').append('svg').attr('width',width).attr('height',height);

var sankey = d3.sankey()
        .nodeWidth(80) 
        .nodePadding(40) 
        .size([width, height]) 
        .nodes(data.nodes)  
        .links(data.links)
        .layout(3);

var path = sankey.link();
var links = svg.append("g").attr('class','linkG').selectAll("path")
            .data(data.links)
            .enter()

// 绑定节点数据
var nodes = svg.append("g").attr('class','nodeG').selectAll(".node")
                .data(data.nodes)
                .enter();

// 绘制连接线
links.append("path")
    .attr({
    fill: "none",   //填充色
            stroke: function(d,i){ return 'red'; },  //描边色
        "stroke-opacity": 0.5,  //描边透明度
          d: path,  //路径数据
          id: function(d,i){ return 'link' +i }  //ID
     })
     .style("stroke-width", function (d) {  //连线的宽度
          return Math.max(1, d.dy);
     });

// 绘制圆形节点   
nodes.append("circle")
    .attr("transform",function (d) {
          return "translate(" + d.x + "," + d.y + ")";
       })
        .attr("r", function(d) { return d.dy / 2; })
        .attr("cx", function(d) { return d.dx/2; })
        .attr("cy", function(d) { return d.dy / 2; })
        .style("fill", "tomato")
        .style("stroke", "gray");

nodes.append("text")
        .attr({
            x: function (d) { return d.x+sankey.nodeWidth() / 2; },
            y: function (d) { return d.y+d.dy / 2; }
        })
        .text(function (d) { return d.name; }); 

 links.append('text')
        .append('textPath')
        .attr('xlink:href', function (d,i) { return '#link' + i; })
        .attr('startOffset','50%')
        .text(function (d) { return '流量:' + d.value; })
<script src="http://bl.ocks.org/d3noob/raw/c9b90689c1438f57d649/a062264eca2dcc575db7981abed0e16797cb5bab/sankey.js"></script>
<div id="app"></div>
#app{
  width:700px;
  height:600px;
  background:#ccc;
}