d3.js应用笔记①

想展示7项测验的得分情况，直方图太过死板，故使用熟悉的force-directed阉割links之后的graph来表示，好处有两个

1. 对于平板更加友好，圆形的图像更加适合平板的展示
2. 动态效果碰来碰去很有意思，直方图比较死板，动态的force图形可以拖来拖去增加趣味性

基本绘制思路：

1. 画布准备：定义绘制图像的画布

    var w = 960,
        h = 550,
        r = 6,
        fill = d3.scale.category10();
   
    var svg = d3.select("#result").append("svg:svg")
             .attr("width", w)
             .attr("height", h);
   

2. 引用布局并定义

    var force = d3.layout.force()
                .gravity(0.07)
                .charge(-800)
                .linkDistance(130)
                .size([w, h]);
   

3. 外部数据的绑定

    d3.json("data.json", function(json) {
       var node = svg.selectAll("circle")
                 .data(json.tests)
                 .enter().append("g")
                 .attr("class", "node")
                 .on("mouseover", mouseover)
                 .on("mouseout", mouseout)
                 .call(force.drag);
       })
   

4. 定义node节点

    node.append("svg:circle")
        .attr("r", function(d) { return d.score; })
        .style("fill", function(d) { return fill(d.group); });
   
   force.nodes(json.tests)
        .on("tick", tick)
        .start();
   
    function tick() {
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    }
   

5. 增加特征

    node.append("text")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      .attr("class", "node-text")
      .style("fill","#fff")
      .text(function(d) { return d.score; });
   

6. 各种堪错

遇到的问题：

1. 始终无法显示text内容的问题：

   当时enter（）之后并没有添加

    .append("g")
    .attr("class", "node")
   

   直接append的circle，在添加text的过程中，在控制台明明可以看到text-content数据，但是始终不显示text的内容，将append独立，并添加以上代码后，问题解决。

   应该是这样做之后，circle和text的等级就是平级，都在g之下，这样就可以显示了。耗时较长，注意该问题。

2. 颜色的问题： 一开始始终不会使用颜色的scale，现在看应该是当时定义的变量和后面的变量引用不符：

    fill = d3.scale.category10();
    …
    .style("fill", function(d) { return fill(d.group); });
   

3. 使text文字在图形中居中的代码：

    .attr("text-anchor", "middle")
    .attr("class", "node-text")