用D3.js画树状图

做项目遇到一个需求，将具有层级关系的词语用树状图的形式展示它们之间的关系，像这样：

或者是这样：

上面的图片只是样例，跟我下面的代码里面用的数据不同

网上有很多这种数据可视化展示的js控件，我这里选择了D3.js。

首先在html页面需要包含D3的js文件，其次我们需要将数据构造成json格式，然后存入到一个d3.json文件

{
"name":"如何学习D3",
"children":
[
    { 
      "name":"预备知识" , 
        "children":
        [
                {"name":"HTML & CSS" },
                {"name":"JavaScript" },
                {"name":"DOM" },
                {"name":"SVG" }
        ] 
      },
      
    { 
        "name":"安装" , 
        "children":
        [
            {
                "name":"记事本软件",
                "children":
                [
                    {"name":"Notepad++"},
                    {"name":"EditPlus"},
                    {"name":"Sublime Text"}
                ]
            },
            {
                "name":"服务器软件",
                "children":
                [
                    {"name":"Apache Http Server"},
                    {"name":"Tomcat"}
                ]
            },
            {"name":"下载D3.js"}
        ] 
    },
    
    { 
        "name":"入门",
        "children":
        [
            {
                "name":"选择集",
                "children":
                [
                    {"name":"select"},
                    {"name":"selectAll"}
                ]
            },
            {
                "name":"绑定数据",
                "children":
                [
                    {"name":"datum"},
                    {"name":"data"}
                ]
            },
            {"name":"添加删除元素"},
            {
                "name":"简单图形",
                "children":
                [
                    {"name":"柱形图"},
                    {"name":"折线图"},
                    {"name":"散点图"}
                ]
            },
            {"name":"比例尺"},
            {"name":"生成器"},
            {"name":"过渡"}
        ] 
    },
    
    { 
        "name":"进阶" , 
        "children":
        [
            {
                "name":"布局的应用",
                "children":
                [
                    {"name":"饼状图"},
                    {"name":"树状图"},
                    {"name":"矩阵树图"}
                ]
            },
            {"name":"地图"}
        ]
    }
]
}

然后开始编写JavaScript代码：

横向树状图：

var width = 700,
    height = 700;

var cluster = d3.layout.cluster()
    .size([width, height - 200]);

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

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(40,0)");
    


d3.json("d3.json", function(error, root) {
    
  var nodes = cluster.nodes(root);
  var links = cluster.links(nodes);
  
  console.log(nodes);
  console.log(links);

  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; });
});

圆形树状图（这个需要用到投影，稍微麻烦一点，不详细解释了）：

//图像区域大小
    var R = 600;

    //定义一个Tree对象,定义旋转角度和最大半径
    var tree = d3.layout.tree()
        .size([360,R/2-120])
        .separation(function(a,b) { return a.parent == b.parent ? 1 : 2;});

    //定义布局方向
    var diagonal = d3.svg.diagonal()  
        .projection(function(d) { 
            var r = d.y, a = (d.x-90) / 180 * Math.PI;
              return [r * Math.cos(a), r * Math.sin(a)];
     }); 

    //新建画布，移动到圆心位置
    var svg = d3.select("#showTree").append("svg")
        .attr("width", R)
        .attr("height", R)
        .append("g")
        .attr("transform", function(d){ return "translate("+R/2+"," + R/2 + ")";});

        //根据JSON数据生成树
        d3.json("d3.json", function(error, data) {
      
      //根据数据生成nodes集合
      var nodes = tree.nodes(data);
      
      //获取node集合的关系集合
      var links = tree.links(nodes);
      
      //为关系集合设置贝塞尔曲线连接
      var link=svg.selectAll(".link")
          .data(links)
          .enter()
          .append("path")
          .attr("class", "link")
          .attr("d",diagonal);
      
      //根据node集合生成节点
      var node = svg.selectAll(".node")
          .data(nodes)
          .enter()
          .append("g")
          .attr("class", "node")
          .attr("transform",function(d){return "rotate(" + (d.x-90) + ")translate(" + d.y + ")"; });
      
      //为节点添加圆形标记,如果有子节点为红色，否则绿色
      node.append("circle")      
          .attr("fill",function(d){return d.children==null?"#0F0":"#F00";})
          .attr("r", 5);
      
      //为节点添加说明文字
      node.append("text")
        .attr("dy", ".4em")
        .text(function(d){return d.name;})
        .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
        .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; });
    });    

D3的d3.json（url，callback）方法可以读取json文件，然后构造树状图。

如果不想把数据写入json文件，直接在后台构造好json数据结构然后传到前台要怎么弄？

其实d3.json（url，callback）方法的url是发起一个get请求，返回一个json字符串，然后进入callback进行处理，本质上跟ajax差不多

所以当我们不想读取文件时，修改一下d3.json（url，callback）的url参数，发起一个get请求到控制器，然后你在控制器里面构造相应的json数据结构，然后返回过来就可以了

但是这里的url不能直接带中文参数，比如：

url = "json.html?word=关键词";

这样的请求发到后台，后台接收的是这样的一段乱码字符串：

关键è¯

那有人说先将这个中文做一次编码，然后在传到后台不就行了？

确实，我们一般在js里面如果要传中文参数到后台都会先进行编码然后再传的，所以我当时也是这么想的，心想这下应该不会出问题了吧，然并卵，后台接收然后解码得到的依然是那串乱码，然后没办法，我只能进d3.js的文件去查看源码，奈何才疏学浅，压根看不懂，也没找到它哪里对这个url做了什么编码或解码操作。后来想到以前见到过在前台进行多次编码然后再传到后台的，我也尝试了一下在js里面进行了两次编码，然后再传到后台，到后台接收然后解码一次，发现能够得到正确的中文参数

 第一行是后台接收的参数，第二行是对参数解码一次得到的结果。

问题是解决了，但是我还是不知道这是为什么，只注意到d3.json这个方法里面发送的是get请求，后来查资料还有问其他人才知道在浏览器地址栏里，浏览器认为%是个转义字符，浏览器会把%与%之间的编码，两位两位取出后进行解码,然后再传递给处理页面，然后由处理页面进行再次解码，而get请求的中文参数就是显示在浏览器地址栏，所以在js里面参数只进行一次编码的话，参数经过浏览器的解码，传到后台的就是没编码的中文，这个当然就会变成乱码，所以在js里面对中文做两次编码然后通过get请求传到后台，后台只需做一次解码就能得到正确的中文参数