D3.js的缩放和根据指定名称进行节点之间的连线

今天在进行D3的缩放学习时一直在报这个错误,后来经过查询资料发现,在进行缩放的设置时,要先将zoom创建,之后的顺序无所谓了,解决网址是https://stackoverflow.com/questions/35357164/d3-zoom-cannot-read-property-apply-of-undefined/35357269#35357269 ,题主的问题与我的一样。

第二个问题是在d3中节点之间连线默认是按照节点的索引,所以source和target需要填写的是节点的索引。但是我希望要的是根据我传递的json数据进行绘制。还是在这个网站中找到了解决办法,https://stackoverflow.com/questions/23986466/d3-force-layout-linking-nodes-by-name-instead-of-index。

这个网站还是非常不错的,除了都是英文,有时候阅读会费事。。。。。。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要用到d3.js库中的布局功能,具体来说是树状布局(tree layout)。具体的代码实现可以参考以下示例: ``` var margin = {top: 20, right: 120, bottom: 20, left: 120}, width = 960 - margin.right - margin.left, height = 800 - margin.top - margin.bottom; var tree = d3.layout.tree() .size([height, width]); var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var svg = d3.select("body").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var root = { "name": "A", "children": [ { "name": "B", "children": [ { "name": "C" }, { "name": "D" } ] }, { "name": "E", "children": [ { "name": "F" }, { "name": "G" } ] } ] }; var nodes = tree.nodes(root), links = tree.links(nodes); var link = svg.selectAll(".link") .data(links) .enter().append("path") .attr("class", "link") .attr("d", diagonal); var node = svg.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }) node.append("circle") .attr("r", 4.5); node.append("text") .attr("dx", function(d) { return d.children ? -8 : 8; }) .attr("dy", 3) .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) .text(function(d) { return d.name; }); ``` 这个示例其实就是一个非常简单的树状结构,但是可以看到节点节点之间是通过直线相连接的。具体来说,需要用到d3.layout.tree()这个函数进行树状布局,再用到d3.svg.diagonal()这个函数来定义连接线的路径,最后通过d3.selectAll()以及.data()等函数将节点和线条加入进去即可。需要注意的是,在节点连接线这一部分的代码当中,attr函数中的参数d以及diagonal函数中的参数d都表示一个节点在树状结构中的位置,需要根据实际情况加以理解。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值