《Getting Started with D3》填坑之旅（四）：第二章（下）

Chapter 2. The Enter Selection（输入选择）

示例2：绘制广场收费站的日平均流量

本章第二个案例，说的是纽约每天数以万计的上班族都会驱车驶过桥梁隧道，途经多个收费区。交管局会对现金支付和电子支付的情况作统计并向公众公开。利用这一数据，再配合开发者社区的数据清洗，就能绘制出广场收费站的日均流量。

这里分了两步：

1. 先绘制一个不带说明标签的纯条形图，然后配上 CSS 样式：

   <script>
       let json = null;
       function draw(data) {
           "use strict";
   
           // badass visualization code goes here
           json = data;
           d3.select('body')
               .append('div')
                   .attr('class', 'chart')
               .selectAll('.bar')
               .data(data.cash)
               .enter()
               .append('div')
                   .attr('class', 'bar')
                   .style('width', function(d) { return d.count / 100 + 'px' })
                   .style('outline', '1px solid white')
                   .text(function(d) { return Math.round(d.count) })
       }
   
       d3.json("/demos/data/plaza_traffic.json", draw);
   </script>
   <style>
       * {
           box-sizing: border-box;  /* newly add */
       }
       div.chart {
           font-family: sans-serif;
           font-size: 0.7em;
       }
       div.bar {
           background-color: DarkRed;
           color: white;
           height: 3em;
           line-height: 3em;
           padding-right: 1em;
           margin-top: 0.1rem;  /* original: 2px */
           text-align: right;
       }
   </style>
   

   这里的坑，是加上 CSS 样式后，需要同步修改单个条形轮廓的颜色（或直接注释掉），另外条形图的间距，也最好按实际情况重新设置（0.1rem），即看到如下效果：

2. 接下来要给纯条形图加上广场名，需要调整一下绑定的元素结构：先绑定一个 DIV 容器（.line），在填入两个子容器（.label 与 .bar），分别绑定广场名和流量数：

let json = null;
function draw(data) {
    "use strict";

    // badass visualization code goes here
    json = data;

    d3.select('body')
        .append('div')
            .attr('class', 'chart')
        .selectAll('div.line')
        .data(data.cash)
        .enter()
        .append('div')
            .attr('class', 'line');

    d3.selectAll('div.line')
        .append('div')
            .attr('class', 'label')
            .text(function(d) {return d.name});

    d3.selectAll('div.line')
        .append('div')
            .attr('class', 'bar')
            .style('width', function(d) { return d.count / 100 + 'px' })
            .text(function(d) { return Math.round(d.count) });
}

d3.json("/demos/data/plaza_traffic.json", draw);

注意到父容器 .line 被多次引用，可以在初始绑定时，赋值给一个变量，以便子容器绑定时引用。对第 8、17、22 行作如下微调：

// Line 8
var lines = d3.select('body')
// ...
// Line 17, 22
lines.append('div.line')
// ...

最后再配上 CSS 样式：

* {
    box-sizing: border-box;
}
div.chart {
    font-family: sans-serif;
    font-size: 0.7em;
}
div.bar {
    background-color: DarkRed;
    color: white;
    height: 3em;
    line-height: 3em;
    padding-right: 1em;
    margin-top: .1rem;
    text-align: right;
}
/* New style for lable group */
div.label {
    height: 3em;
    line-height: 3em;
    padding-right: 1em;
    margin-bottom: .1rem;
    float: left;
    width: 20em;
    text-align: right;
}

说好的效果本来是：

结果却是：

没错，这是本例留给读者的彩蛋福利：

1. 标签区宽度 20em 显然是不够的，所以出现了文字重叠（改大些即可，如 25em）；
2. 标签区与数据区重叠：因为没有提到同步修改数据区的 CSS 样式（需加上 margin-left: 25em; 具体空出多少要视 1 的调整结果而定）。

调整后的 CSS 样式：

div.bar {
    background-color: DarkRed;
    color: white;
    height: 3em;
    line-height: 3em;
    padding-right: 1em;
    margin-top: .1rem;
    text-align: right;
    margin-left: 25em; /* newly added */
}
div.label {
    height: 3em;
    line-height: 3em;
    padding-right: 1em;
    margin-bottom: .1rem;
    float: left;
    width: 25em;  /* enlarged width */
    text-align: right;
}

最后来看看版本差异。没有什么特别的注意事项，无非是数据绑定、箭头函数、模板字符串的使用：

d3.select('body')
    .append('div')
        .attr('class', 'chart')
    .selectAll('div.line')
    .data(data.cash)
    .join(enter => {
        const lines = enter.append('div')
            .attr('class', 'line');
        
        lines.append('div')
            .attr('class', 'label')
            .text(d => d.name);
        
        lines.append('div')
            .attr('class', 'bar')
            .style('width', d => `${d.count / 100}px`)
            .text(d => Math.round(d.count));
    });

关于 CSS 样式，再来看书中给过的一处提示（原书第 14 页）：

本例采用浮动的 div 标签实现可视化图形，虽然不用混杂除 HTML 以外的知识，但同时也要注意浏览器的布局规则——这样 JavaScript 就要略显复杂；利用 CSS 控制条形图的外观，也可能与用户自定义样式冲突，导致原始图表走样。

填上 CSS 样式的坑后，顿时感到神清气爽（虽然并没有什么直接关联。。。）。要解决上述问题，作者给出的方案，是下一章用到的、基于 SVG 而非 DIV 绘制的可视化图形。

一起来看看下一章（第三章）又给大家精心准备了什么样的坑吧。