suibiansheba
suibiansheba
2017-05-19 15:17

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

3
  • 连线
  • d3.js
  • 可视化

近期接触D3做与可视化相关的东西,,
,,根据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);
    var links = tree.links(nodes);

    console.log(nodes);
    console.log(links);

    var link = group.selectAll(".link")
      .data(links)
      .enter()
      .append("path")
      .attr("class", "link")

      .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条回答

为你推荐

换一换