d3.js 生成 svg tree 树形结构图

实例demo http://www.jq22.com/jquery-info21370 

d3中文版    https://d3js.org.cn
官方API   https://github.com/d3/d3/blob/master/API.md
官方API v3  https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md
官方示例： https://github.com/d3/d3/wiki/Gallery

w3cschool 字典 https://www.w3cschool.cn/dict/

 d3 v4  https://www.w3cschool.cn/doc_d3_4/dict

 d3 v3  https://www.w3cschool.cn/doc_d3_3/dict

 

使用D3和FileReader在线生成树形图  https://blog.csdn.net/u014291497/article/details/70991125

 

d3.v3 和 d3.v4 的变换 中英文版

https://github.com/d3/d3/blob/master/CHANGES.md#hierarchies-d3-hierarchy

https://github.com/xswei/d3js_doc/blob/master/API_Reference/CHANGES.md

本人d3 只制作了tree树状图，别的不太了解，调接口的没有总结，下面这个 demo 是原生的，3.x

d3 需要英语好，才好入门。

echarts 中有树状图 可以先参考一下。
https://echarts.baidu.com/examples/editor.html?c=tree-basic

这边有一个别人的在线demo https://codepen.io/zhulinpinyu/pen/EaZrmM/?editors=0010

双向树状图 线是直线 

 http://bl.ocks.org/jdarling/2503502 

d3.js  中文版 3.x 转自别人的翻译

http://blog.mn886.net/chenjianhua/show/773c07b3abce/index.html

D3.js拖放，Zoomable，平移，可折叠树与自动调整大小。在线demo

http://bl.ocks.org/robschmuecker/7880033

 

收藏转自: 有重复，以供参考

https://www.cnblogs.com/wanyong-wy/p/7603123.html

 https://www.cnblogs.com/quyixuanblog/p/5754129.html

 https://blog.csdn.net/songqiang2011/article/details/86521194

 https://blog.csdn.net/lzhlzz/article/details/38561737

https://www.jianshu.com/p/909a241acfdd 

https://www.jianshu.com/p/6ef01845854f

https://blog.csdn.net/loveljy_19901114/article/details/81530222

http://www.cleey.com/blog/single/id/705.html

https://www.cnblogs.com/shihuc/p/6150526.html

 

https://godbasin.github.io/2018/03/10/d3-tree-notes-8-add-path-click/

http://d3.godbasin.com/8-add-path-click/index.html

 

http://www.decembercafe.org

域名过期 // http://www.ourd3js.com/wordpress/865/#more-865

 

snap.svg  转自张鑫旭  可以参考一下
https://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Snap.hsl.php

 

tree.size(height,width)
tree.nodeSize 如果子节点多了会重叠，可以采用 nodeSize([100,50]) 第一个参数是两个节点上下的距离，第二个不知道。我设置的svg 内的g 位置是 150 0 改一下这个位置就好，width/4 height /2 

这个树状图支持 提示框，可以移动到提示框上复制文字，内容的话，可以通过d3 增加，或者自己写标签然后d3.select 获取然后赋值。

拖拽 缩放 zoom
提示框 是自己写的 

可以换方向 这是从左到右，可以从右到左 link 通过css transform 180 度 这是线 通过修改noderEnter 和 nodeUpdate 改为负值即可，只需要更改第一个参数 

 

{
  "name":"中国",
  "children":
  [

    {
      "name":"广西" ,
      "children":
      [
        {
          "name":"桂林"

        },
        {"name":"南宁"},
        {"name":"柳州"},
        {"name":"防城港"},
        {
          "name":"浙江"
        }
      ]
    },
    {
      "name":"浙江4" ,
      "children":
      [
        {"name":"杭州",
          "children":[
            {"name":"宁波",
              "children":[
                {"name":"宁波",
                  "children":[
                    {"name":"温州",
                      "children":[
                        {"name":"温州",
                          "children":[
                            {"name":"温州",
                              "children":[
                                {"name":"宁波"
                                },
                                {"name":"温州" },
                                {"name":"绍兴"}
                              ]
                            },
                            {"name":"绍兴"}
                          ]
                        },
                        {"name":"绍兴"}
                      ]
                    },
                    {"name":"绍兴"}
                  ]
                },
                {"name":"温州"},
                {"name":"绍兴"}
              ]
            },
            {"name":"温州" }
          ]
        },
        {"name":"宁波" },
        {"name":"温州" },
        {"name":"绍兴" }
      ]
    },
    {
      "name":"浙江5" ,
      "children":
      [
        {"name":"杭州",
          "children":[
            {"name":"宁波",
              "children":[
                {"name":"宁波",
                  "children":[
                    {"name":"温州",
                      "children":[
                        {"name":"温州",
                          "children":[
                            {"name":"温州",
                              "children":[
                                {"name":"宁波"
                                },
                                {"name":"温州"},
                                {"name":"绍兴"}
                              ]
                            },
                            {"name":"绍兴"}
                          ]
                        },
                        {"name":"绍兴"}
                      ]
                    },
                    {"name":"绍兴"}
                  ]
                },
                {"name":"温州"},
                {"name":"绍兴"}
              ]
            },
            {"name":"温州" }
          ]
        },
        {"name":"宁波"},
        {"name":"温州" },
        {"name":"绍兴" }
      ]
    },

    {
      "name":"新疆6" ,
      "children":
      [
        {"name":"乌鲁木齐"},
        {"name":"克拉玛依"},
        {"name":"吐鲁番"},
        {"name":"哈密"}
      ]
    }
  ]
}