D3.JS中树状图的连线样式 3C

，，根据json数据做了简单的横向树状图，
，不过代码是教程的，教程中的连线是什么贝塞尔线，不过
，我想把连线变为直线，而且父子节点连线长度和角度能控制，怎么解决呢？？？？

1.图效果

2.程序代码

`````` var tree = d3.layout.tree()
.size([width1, height1-200])
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

var zoom = d3.behavior.zoom()
.scaleExtent([1, 10])
.on("zoom", zoomed);

var svg1= d3.select("#main1").append("svg")
.attr("width", width1)
.attr("height", height1);

var group = svg1.append("g")
.call(zoom);

d3.json("tree.json", function(error, root1) {

var nodes = tree.nodes(root1);

console.log(nodes);

.enter()
.append("path")

.attr("d", diagonal);

var node = group.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
``````

3.简单的数据

`````` {
"name":"人民日报",
"children":
[
{
"name":"新浪军事" ,
"children":
[
{"name":"sdvsa" },
{"name":"树VC" },
{"name":"克看依"},
{"name":"克看依"}
]
},

{
"name":"云南共青团" ,
"children":
[

]
},

{
"name":"罗援",
"children":
[

]
},

{
"name":"军武菌" ,
"children":
[
{"name":"dfff"},
{"name":"fv依"}
]
},
{
"name":"莱卡棉",
"children":
[

]
},
``````

1个回答

D3JS画出的树状图怎么设置在浏览器中的位置？

.net core 3.0 System.Text.Json序列化树形结构时内存溢出,该怎么配置
.net core3.0 wei API,默认返回的json序列化改成了System.text.json, 默认的序列化发现在序列树形的数据会出现内存溢出,要怎么配置默认的 Newtonsof序列化后的结果 ![图片说明](https://img-ask.csdn.net/upload/201909/18/1568778642_413337.png) System.Text.Json序列化的结果 ![图片说明](https://img-ask.csdn.net/upload/201909/18/1568778656_373334.png) 数据的结果(Newtonsof序列化后) ``` [ { "ParentID": "", "ID": "code", "Name": "代码", "Contents": [], "Children": [ { "ParentID": "code", "ID": "database", "Name": "database", "Contents": [], "Children": [] }, { "ParentID": "code", "ID": "dotnet", "Name": "dotnet", "Contents": [], "Children": [] }, { "ParentID": "code", "ID": "javascript", "Name": "js", "Contents": [], "Children": [] } ] }, { "ParentID": "", "ID": "hardware", "Name": "硬件", "Contents": [], "Children": [] }, { "ParentID": "", "ID": "music", "Name": "音乐", "Contents": [], "Children": [] }, { "ParentID": "", "ID": "photo", "Name": "代码", "Contents": [], "Children": [] }, { "ParentID": "", "ID": "video", "Name": "视频", "Contents": [], "Children": [] } ] ```

js如何生成树状图结构？

easyui动态添加html时的样式问题

ssm做三级级联树形图实现条件查询功能

C#treeview控件从数据库获取数据显示树形图

js或jQuery怎样实现树形表

js树状分级的菜单。。
java+bootstrap实现树状图

（接上文《源码阅读(18)：Java中主要的Map结构——HashMap容器（中）》） 3.4.4、HashMap添加K-V键值对（红黑树方式） 上文我们介绍了在HashMap中table数组的某个索引位上，基于单向链表添加新的K-V键值对对象（HashMap.Node&lt;K, V&gt;类的实例），但是我们同时知道在某些的场景下，HashMap中table数据的某个索引位上，数据是按照红黑树
c++制作的植物大战僵尸，开源，一代二代结合游戏
此游戏全部由本人自己制作完成。游戏大部分的素材来源于原版游戏素材，少部分搜集于网络，以及自己制作。 此游戏为同人游戏而且仅供学习交流使用，任何人未经授权，不得对本游戏进行更改、盗用等，否则后果自负。 目前有六种僵尸和六种植物，植物和僵尸的动画都是本人做的。qq：2117610943 开源代码下载 提取码：3vzm 点击下载--&gt; 11月28日 新增四种植物 统一植物画风，全部修
Java学习的正确打开方式

Python——画一棵漂亮的樱花树（不同种樱花+玫瑰+圣诞树喔）

linux系列之常用运维命令整理笔录

Python 基础（一）：入门必备知识

Python十大装B语法
Python 是一种代表简单思想的语言，其语法相对简单，很容易上手。不过，如果就此小视 Python 语法的精妙和深邃，那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点，并附上详细的实例代码。如能在实战中融会贯通、灵活使用，必将使代码更为精炼、高效，同时也会极大提升代码B格，使之看上去更老练，读起来更优雅。 1. for - else 什么？不是 if 和 else 才

2019年11月中国大陆编程语言排行榜
2019年11月2日，我统计了某招聘网站，获得有效程序员招聘数据9万条。针对招聘信息，提取编程语言关键字，并统计如下： 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7

Python 编程实用技巧
Python是一门很灵活的语言，也有很多实用的方法，有时候实现一个功能可以用多种方法实现，我这里总结了一些常用的方法，并会持续更新。
“狗屁不通文章生成器”登顶GitHub热榜，分分钟写出万字形式主义大作

"狗屁不通文章生成器"登顶GitHub热榜，分分钟写出万字形式主义大作
GitHub 被誉为全球最大的同性交友网站，……，陪伴我们已经走过 10+ 年时间，它托管了大量的软件代码，同时也承载了程序员无尽的欢乐。 万字申请，废话报告，魔幻形式主义大作怎么写？兄dei，狗屁不通文章生成器了解一下。这个富有灵魂的项目名吸引了众人的目光。项目仅仅诞生一周，便冲上了GitHub趋势榜榜首（Js中文网 -前端进阶资源教程）、是榜首哦