d3-sankey 桑基图数据量过大的情况下页面混乱

项目中需要使用桑基图的图表，对比百度的echarts和d3.js中的桑基图的例子，抱着学习的态度，选用了d3.js (version 4).
废话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Sankey</title>
  <style>
    body {
      padding: 10px;
      min-width: 600px;
      max-width: 1200px;
      margin: auto;
      -moz-user-select: none;
      -webkit-user-select: none;
    }
    #chart {
      height: 500px;
      font: 13px sans-serif;
    }
    .chart-sankey {
      background: #fff;
      box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.5);
    }
    .node rect {
      fill-opacity: .9;
      shape-rendering: crispEdges;
      stroke-width: 0;
      cursor: move;
    }
    .node text {
      text-shadow: 0 1px 0 #fff;
    }
    .link {
      fill: none;
      stroke: #ddd;
      stroke-opacity: 0.5;
      cursor: pointer;
    }
    .link title {
      visibility: hidden;
    }
    .link:hover {
      /*stroke-opacity: 1;*/
    }
    .link:hover title{
      visibility: visible;
    }
    .tooltip {
        position: absolute;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 3px;
        pointer-events: none;
        max-width: 200px;
        display: none;
        box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.3);
        line-height: 1.2;
        font-size: 12px;
    }
  </style>
  <script src="../src/d3/d3.min.js"></script>
  <script src="../src/d3-sankey/d3-sankey.js"></script>
</head>
<body>
  <div id="chart">
    <div id="tooltip" class="tooltip"></div>
  </div>
  <script>
    var margin = {top: 1, right: 1, bottom: 6, left: 1},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    var timer;
    var formatNumber = d3.format(",.0f"),   //decimal places
        format = function(d) { return formatNumber(d) + " TWh"; },
        color = d3.scaleOrdinal(d3.schemeCategory20);
    var svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    var sankey = d3.sankey()
        .nodeWidth(30)
        .nodePadding(10)
        .size([width, height]);

    var path = sankey.link();
    var toolTips = document.getElementById('tooltip');
    var mouseHas = false

      var energy= {
        nodes: [
          {
            name: "加入购物车",
            value: 3
          },
          {
            name: "下单",
            value: 2
          },
          {
            name:"付款",
            value:2
          },
          {
            name:"加入购物车",
            value:3
          },
          {
            name:"下单",
            value:5
          },
          {
            name:"付款",
            value:3
          },
          {
            name:"收货",
            value:2
          },
          {
            name:"下单",
            value:2
          },
          {
            name:"付款",
            value:8
          },
          {
            name:"申请退款",
            value:1
          },
          {
            name:"收货",
            value:1
          },
          {
            name:"加入购物车",
            value:1
          },
          {
            name:"付款",
            value:4
          },
          {
            name:"收货",
            value:3
          },
          {
            name:"付款",
            value:1
          },
          {
            name:"申请退款",
            value:3
          },
          {
            name:"收货",
            value:7
          },
          {
            name:"退货",
            value:2
          },
          {
            name:"收货",
            value:1
          }
          ],
          links: [
          {
            source:5,
            target:10,
            value:1
          },
          {
            source:2,
            target:6,
            value:2
          },
          {
            source:1,
            target:5,
            value:2
          },
          {
            source:8,
            target:16,
            value:4
          },
          {
            source:3,
            target:8,
            value:2
          },
          {
            source:7,
            target:12,
            value:2
          },
          {
            source:8,
            target:13,
            value:2
          },
          {
            source:3,
            target:7,
            value:1
          },
          {
            source:12,
            target:15,
            value:1
          },
          {
            source:5,
            target:13,
            value:1
          },
          {
            source:13,
            target:17,
            value:1
          },
          {
            source:0,
            target:5,
            value:1
          },
          {
            source:14,
            target:18,
            value:1
          },
          {
            source:11,
            target:14,
            value:1
          },
          {
            source:10,
            target:17,
            value:1
          },
          {
            source:8,
            target:15,
            value:2
          },
          {
            source:0,
            target:4,
            value:2
          },
          {
            source:12,
            target:16,
            value:3
          },
          {
            source:4,
            target:8,
            value:5
          },
          {
            source:5,
            target:9,
            value:1
          }
          ]
        }
      sankey
          .nodes(energy.nodes)
          .links(energy.links)
          .layout(32);
      // 设置 link
      var link = svg.append("g").selectAll(".link")
          .data(energy.links)
        .enter().append("path")
          .attr("class", "link")
          .attr("d", path)
          .style("stroke-width", function(d) { return Math.max(1, d.dy); })
          .sort(function(a, b) {
            return b.dy - a.dy;
          })
          .on('mouseover', function (d) {
              var coordinates = [0, 0];
              coordinates = d3.mouse(this);
              var x = coordinates[0];
              var y = coordinates[1];
              toolTips.innerHTML= d.source.name + "->" + d.target.name + "<br/>" + format(d.value);
              toolTips.style.display = 'block'
              toolTips.style.top = (y - 20)  + 'px'
              toolTips.style.left = (x + 100) + 'px'
              // tip.show(d)
          })
          .on('mousemove', function (d) {
            var coordinates = [0, 0];
            coordinates = d3.mouse(this);
            var x = coordinates[0];
            var y = coordinates[1];
            toolTips.innerHTML= d.source.name + "->" + d.target.name + "<br/>" + format(d.value);
            toolTips.style.display = 'block'
            toolTips.style.top = (y - 20) + 'px'
            toolTips.style.left = (x + 50) + 'px'
            // tip.show(d)
          })
          .on('mouseout', function (d, e) {
            var evt = window.event || e;
            mouseHas = false
            var obj=evt.toElement||evt.relatedTarget;
            var pa=this;
            if(pa.contains(obj)) return false;
            toolTips.style.display = 'none'
            // tip.show(d)
          })
      // 设置node
      var node = svg.append("g").selectAll(".node")
          .data(energy.nodes)
        .enter().append("g")
          .attr("class", "node")
          .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .call(d3.drag()
          .subject(function(d) {
            return d;
          })
          .on("start", function() {
            this.parentNode.appendChild(this);
          })
          .on("drag", dragmove));

      node.append("rect")
          .attr("height", function(d) { return d.dy; })
          .attr("width", sankey.nodeWidth())
          .style("fill", function(d) { return d.color = color(d.name.split("|")[0]); })
          .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
        .append("title")
          .text(function(d) { return d.name + "\n" + format(d.value); });

        node.append("text")
            .attr("x", -6)
            .attr("y", function(d) { return d.dy / 2; })
            .attr("dy", ".35em")
            .attr("text-anchor", "end")
            .attr("transform", null)
            .style("fill", "#666")
            .text(function(d) { return d.name; })
          .filter(function(d) { return d.x < width / 2; })
            .attr("x", 6 + sankey.nodeWidth())
            .attr("text-anchor", "start");
        function dragmove(d) {
          d3.select(this).attr("transform", "translate(" + d.x + "," + (d.y = Math.max(0, Math.min(height - d.dy, d3.event.y))) + ")");
          sankey.relayout();
          link.attr("d", path);
        }
</script>
</body>
</html>

代码中大多是官网上的例子，只是加了个提示框的跟随鼠标移动的提示框。
说说遇到的问题吧

问题1：鼠标放到每个link上，如何使相应的 link 颜色加深

//  css  样式中是这么写的
 .link {
      fill: none;
      stroke: #ddd;
      stroke-opacity: 0.5;
      cursor: pointer;
    }
    .link title {
      visibility: hidden;
    }
    .link:hover {
      stroke-opacity: 1;
    }
// 加了鼠标事件后发现这个hover效果不好用了，需求时间紧，没办法，简单粗暴，好用就行。
// 所以在鼠标mouseover 、mousemove、mouseout事件中修改了，代码如下
.on('mouseover', function (d) {
     d3.select(this).style("stroke-opacity", "1")
       .......
 })
.on('mousemove', function (d) {
     d3.select(this).style("stroke-opacity", "1")
       .......
 })
.on('mouseout', function (d) {
     d3.select(this).style("stroke-opacity", "0.5")
       .......
 })

问题2：例子中的测试数据量大小，开发中用大数据测试的时候发现页面全乱了。

数据量大的时候页面会报错
Error: <rect> attribute height: A negative value is not valid

stackoverflow答案链接：http://stackoverflow.com/questions/40579174/large-data-set-breaks-d3-sankey-diagram/40581444#40581444

就这些，如有问题，欢迎交流与学习。
简书
 github

google和baidu的一些参考资料：

https://github.com/d3/d3 d3.js github地址
https://github.com/d3/d3-sankey D3 桑基图插件
https://github.com/d3/d3/blob/master/API.md#dragging-d3-drag D3 api插件
https://bl.ocks.org/xaranke/9ada4c74a87b57ae7308 D3 桑基图官方demo
https://github.com/tianxuzhang/d3.v4-API-Translation D3最新版本(version 4) 中文文档
http://blog.csdn.net/tianxuzhang/article/details/49624701 博客园
https://yq.aliyun.com/articles/72335 d3数据的"更新" 和 "退出" （阿里云栖社区）

最后编辑于：2017.12.06 15:44:39

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,132评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,802评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,566评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,858评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,867评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,695评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,064评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,705评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,915评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,677评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,796评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,432评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,041评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,992评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,223评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,185评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,535评论 2赞 343

d3-sankey 桑基图数据量过大的情况下页面混乱

推荐阅读更多精彩内容