Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >D3可折叠树,节点合并问题

D3可折叠树,节点合并问题
EN

Stack Overflow用户
提问于 2015-11-16 00:28:10
回答 1查看 2.8K关注 0票数 2

我使用的是可折叠树,如链接所示。我的数据是非常大的,所以视图出来,这是互相崩溃。截图如下:

目前,我正在调查此链接。它帮助我动态地增加树的大小。这样,我就可以更改节点的合并,如下所示:

现在我的问题是如何动态地增加框架的高度?当我展开所有节点时,树的大小超过画布/帧的高度。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-19 05:09:22

我已经找到了解决办法。我正在更改可折叠树代码的更新函数。以下是我的代码:-

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function update(source) {

var duration = d3.event && d3.event.altKey ? 5000 : 500;    

// compute the new height
var levelWidth = [1];
var childCount = function(level, n) {
if(n.children && n.children.length > 0) {
  if(levelWidth.length <= level + 1) levelWidth.push(0);      
  levelWidth[level+1] += n.children.length;
  n.children.forEach(function(d) {`
    childCount(level + 1, d);
  });
}
};

childCount(0, root);  

newHeight = d3.max(levelWidth) * 60; // 20 pixels per line    

tree = tree.size([newHeight, width]);

d3.select("svg").remove();//TO REMOVE THE ALREADY SVG CONTENTS AND RELOAD ON EVERY UPDATE

svg = d3.select("body").append("svg");

svg.attr("width", width + margin.right + margin.left)
.attr("height", newHeight + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);

// Normalize for fixed-depth.
nodes.forEach(function(d) { d.y = d.depth * 180; });

// Update the nodes…
var node = svg.selectAll("g.node")
  .data(nodes, function(d) { return d.id || (d.id = ++i); });

// Enter any new nodes at the parent's previous position.
var nodeEnter = node.enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + source.y0 + "," +                     source.x0 + ")"; })
  .on("click", click);

nodeEnter.append("circle")
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

nodeEnter.append("text")
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", "-.75em")
  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  .text(function(d) { return d.name; })
  .style("fill-opacity", 1e-2);

nodeEnter.append("text")
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", "1.00em")
  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  .text(function(d) { return d.info1; })
  .style("fill-opacity", 1e-2);

// Transition nodes to their new position.
var nodeUpdate = node.transition()
  .duration(duration)
  .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

nodeUpdate.select("circle")
  .attr("r", 6)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

nodeUpdate.selectAll("text")
  .style("fill-opacity", 4);

// Transition exiting nodes to the parent's new position.
var nodeExit = node.exit().transition()
  .duration(duration)
  .attr("transform", function(d) { return "translate(" + source.y + "," +     source.x + ")"; })
  .remove();

nodeExit.selectAll("text")
  .style("fill-opacity", 1e-6);

// Update the links…
var link = svg.selectAll("path.link")
  .data(links, function(d) { return d.target.id; });

// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
  .attr("class", "link")
  .attr("d", function(d) {
    var o = {x: source.x0, y: source.y0};
    return diagonal({source: o, target: o});
  });

// Transition links to their new position.
link.transition()
  .duration(duration)
  .attr("d", diagonal);

// Transition exiting nodes to the parent's new position.
link.exit().transition()
  .duration(duration)
  .attr("d", function(d) {
    var o = {x: source.x, y: source.y};
    return diagonal({source: o, target: o});
  })
  .remove();

// Stash the old positions for transition.
nodes.forEach(function(d) {
d.x0 = d.x;
d.y0 = d.y;
});

}
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33731046

复制
相关文章
WordPress 技巧:给管理员显示 PHP 错误
在 WordPress 开发的时候,debug 是最麻烦的一件事情,下面这段代码可以让管理员立刻看到 PHP 错误:
Denis
2023/04/15
3940
WordPress后台首页显示RSS错误的解决办法
这两天,麻烦不断,可能是因为我折腾的比较频繁吧!老是出现奇奇怪怪的问题,而且百度、GG 居然搜不到有用的解决办法!折腾了大半天,终于被我搞定,虽然还是很笨的方法,但至少解决了问题,就贴出来一下,希望对以后有同样问题的网友有所参考。 解决问题前,我忘记了截取错误图片,只好文字说明一下了: 就是进入 WP 后台首页(仪表盘),【Wordpress 新闻】下工具显示如下类似的报错信息: RSS 错误:WP HTTP Error: Operation timed out after 10000 millisecon
张戈
2018/03/23
1.7K0
点击显示错误
双折线点击一个,另一显示a b 错误.PNG 正确.PNG 隐藏一条线 tooltip: { // 气泡 trigger: "axis"
用户4344670
2019/08/28
1.2K0
点击显示错误
wordpress显示作者信息
作者:matrix 被围观: 2,932 次 发布时间:2013-06-22 分类:Wordpress 兼容并蓄 | 无评论 »
HHTjim 部落格
2022/09/26
5880
wordpress显示作者信息
Wordpress显示所有文章
使用下面loop只能展示当前分类下的文章 <?php if(have_posts()): ?> <?php while(have_posts()):the_
切图仔
2022/09/14
7370
添加wordpress后台验证功能
作者:matrix 被围观: 1,931 次 发布时间:2013-11-04 分类:Wordpress 兼容并蓄 | 12 条评论 »
HHTjim 部落格
2022/09/26
4330
WordPress 显示相对日期
相对日期,文章或者评论发表日期以“发表于1小时前”,这种形式显示,相对日期会给人一种发布的内容条目距现在很近的感觉,所以很多新闻类的网站和社交媒体网站都喜欢用这种相对日期。
星哥玩云
2022/08/13
9130
WordPress 显示相对日期
spring之如何将验证错误信息显示在相应界面
在后台获取到验证错误之后可以这么在前端中进行显示:(利用springmvc验证的,而不是自己定义的)
西西嘛呦
2020/08/26
6390
spring之如何将验证错误信息显示在相应界面
「R」显示英文错误
中文使用 R 经常看到各种乱码文字,让人看不懂意思,特别是在 Windows 系统上。
王诗翔呀
2020/07/02
1.8K0
WordPress添加FPS帧率显示
如果经常打游戏的话,对于FPS帧率波动变化是非常在意的一件事,在游戏的世界里帧率越低就越容易卡段,其实我们也可以尝试让自己的网站显示FPS帧率,教程也是很简单,只需一段js代码即可实现我们的这个需求!今天就给朋友们分享一下如何在WordPress添加帧率显示的教程,请继续往下看!
若梦
2022/04/01
5490
WordPress添加FPS帧率显示
我们经常打游戏时非常的关注游戏里的帧率的变化,游戏帧越低就越容易卡段,那么我们是否也可以给网站弄个FPS帧率显示呢?毋庸置疑当然可以啦,如果注意观察我网站的左上角,就会发现有xxFPS这几个字不断的发生变化,没错,它就是今天的主角FPS。其实非常的简单,只需一句js代码即可实现!今天就给大家分享一下WordPress添加帧率显示的教程,请往下看!
小狐狸说事
2022/11/17
5250
WordPress添加FPS帧率显示
WordPress评论添加验证码
WordPress在互联网上面有34%的使用率,从业余爱好的博客到新闻网站很多都是使用的WordPress源码,因为使用的人比较多,所以很多的人开发了一些发送垃圾评论的软件,自动化批量的发送垃圾评论,所以在安装时WordPress自带有一个Akismet Anti-Spam的插件,但是还是会有一些漏网之鱼,一般可以开启评论审核不让垃圾评论第一时间显示,但这并不能阻断垃圾评论的产生。所以我们需要验证码防止机器人评论广告信息。
爱游博客
2019/08/07
1.4K0
WordPress评论添加验证码
WordPress 主题教程 #8:验证 XHTML
验证 XHTML 是从零开始创建 WordPress 主题系列教程的第八篇。在开始学习 CSS 并修改 style.css 文件之前,我们需要学习如何验证代码,简单说,验证(Validate/Validating/Validation)就是检查下代码有没有错误,而验证又分为:XHTML Validator 和 CSS Validator,这篇我们学到 XHTML 验证器。
Denis
2023/04/15
4180
WordPress IP验证不当漏洞修复
修复方案:找到/wp-includes/http.php这个文件,在文件的465行附近找到:
iDavid丶
2018/06/25
1.5K3
WordPress IP验证不当漏洞修复
出现“内部错误,无法显示”
This page contains the following errors: error on line 2 at column 6: XML declaration allowed only at the start of the document Below is a rendering of the page up to the first error. 提示信息是头部有错误,我登录后台查看我修改过的页面,然后找到home.php我看了十几分钟没有发现那里有错误~~ 莫非头部不能有空格? 去掉试试
苦咖啡
2018/05/07
3.2K0
linux python 中文显示错误
UnicodeEncodeError: ‘ascii’ codec can’t encode characters in position 20-25: ordinal not in range(128)
py3study
2020/01/07
5.4K0
wordpress接入腾讯验证码的人机验证方法
网站安全一直是人们最关心的话题。人机验证的使用可以有效地提高网站的安全性,防止网站接口被机器程序窃取。如刷短信、刷邮件、刷评论等。
Hello-1
2022/08/30
1.3K0
wordpress接入腾讯验证码的人机验证方法
thinkphp验证码不显示
分析了半天,用下面的代码发现图片输出前已经输出了有3个字节字符,导致图片无法被正确识别
老高的技术博客
2022/12/27
1K0
WordPress底部显示页面加载时间
效果预览 方法 1.将以下代码加入到主题的functions.php中 //页面加载时间自动检测 function wp_page_speed() { date_default_tim
回忆大大
2021/08/09
1.7K0
WordPress底部显示页面加载时间
点击加载更多

相似问题

WordPress Caldera表单在验证时显示错误消息

10

如何显示wordpress设置api验证错误信息?

11

Wordpress the_content()验证错误

11

WordPress RSS提要验证错误

44

显示验证错误

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文