数据可视化实战：使用D3设计交互式图表

20140224-interactive-data-visualization-for-web-d3.txt

数据可视化实战：使用D3设计交互式图表
跳转至： 导航、 搜索

    p38 GeoJSON
    DOM操纵：
        d3.select("body").append("p").text("Hello, world!"); //模仿jQuery的连缀语法
            __data__属性？ 
        .data(dataSet)
            dataSet就是普通的JSON对象数组；假设dataSet中有5个元素，则此后的所有方法都会执行5遍 
        .enter()
            根据当前选择的DOM元素和数据集，如果后者比前者多，则创建一个新的占位元素 
        .text()
            这里除了文本字符串外，也可以传入一个返回文本的callback（显示上的格式化转换？）
            其他：.attr() .style(name, callback) 
    p82 K，这里实际上是在用div元素来做柱形图？？
        p84 记住，是数据驱动可视化，而不是相反 
    p88
        svg.selectAll("circle").data(dataSet).enter().append("circle"); 
          //注意，在这个过程中，数据已经绑定到SVG circle元素了
        p92 在D3中，永远得先选择你想要操作的元素，即使这个元素暂时还没有
        p95 SVG改变元素的height属性时，默认是上端对齐（因为其坐标系的原因？）
            .attr("y", function(d){return h-d;});
            直接传入一个多值属性映射（略） 
        p100 文本水平居中：.attr("text-anchor", "middle") 
    比例尺
        var scale = d3.scale.linear().domain([100,500]).range([10,350]); //然后把scale用在回调函数中过滤一下。。。
        其他比例尺：sqrt pow log quantize quantile ordinal d3.time.scale() 
    数轴
        var xAxis = d3.svg.axis();
        ...
        优化刻度：.ticks(5) 
    更新、过滤和动画
        事件监听器：.on("click", cb)
            p169 d3.select(this).attr("id") 
        过渡动画：插入.transition()，持续时间默认是250ms（1/4s）
            .duration(1000)
            .ease("linear")
            .delay
            .each("start"/"end", cb) 
        .remove()
        通过key连接数据
            .data(dataSet, function(d){return d.key;}) 
    交互式图表
        p177 忽略鼠标事件：pointer-events:none; //这时mouse事件可以穿透这个元素，到达它下面的元素
        （相当于指导HitTest的内部处理？）
        p179 .sort(function(a,b){ return d3.ascending(a,b); });
        提示条？append("text").attr("id", "tooltip").... 
    布局
        全部的布局方法：Bundle Chord Cluster Force Hierarchy Histogram Pack Pie Stack Tree Treemap
            .data(pie(dataSet)) ? 
        力导向布局：d3.layout.force().nodes(...).links(...).... 
    地图