d3-sankey桑基图数据量过大的情况下页面混乱
2023年7月9日发(作者：)
d3-sankey桑基图数据量过⼤的情况下页⾯混乱项⽬中需要使⽤桑基图的图表，对⽐百度的echarts和中的桑基图的例⼦，抱着学习的态度，选⽤了 (version 4).废话不多说，直接上代码：
Sankey 代码中⼤多是官⽹上的例⼦，只是加了个提⽰框的跟随⿏标移动的提⽰框。说说遇到的问题吧问题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) { (this).style("stroke-opacity", "1") ....... }).on('mousemove', function (d) { (this).style("stroke-opacity", "1") ....... }).on('mouseout', function (d) { (this).style("stroke-opacity", "0.5") ....... })问题2： 例⼦中的测试数据量⼤⼩，开发中⽤⼤数据测试的时候发现页⾯全乱了。数据量⼤的时候页⾯会报错Error:
attribute height: A negative value is not validstackoverflow答案链接：/questions/40579174/large-data-set-breaks-d3-sankey-diagram/40581444#40581444google和baidu的⼀些参考资料：/d3/d3 github地址/d3/d3-sankey D3 桑基图插件/d3/d3/blob/master/#dragging-d3-drag D3 api插件/xaranke/9ada4c74a87b57ae7308 D3 桑基图官⽅demo/tianxuzhang/d3.v4-API-Translation D3最新版本(version 4) 中⽂⽂档/tianxuzhang/article/details/49624701 博客园/articles/72335 d3数据的"更新" 和 "退出" （阿⾥云栖社区）
发布者：admin，转转请注明出处：http://www.yc00.com/xiaochengxu/1688905240a182208.html
评论列表（0条）