D3.js实战指南：基础操作入门

通过一段时间的探索和实践，我利用D3.js完成了多个项目。在此过程中，我注意到中文互联网上关于D3.js的教程相对较少，而大多数高质量的教程和资源都是英文的，这无疑增加了初学者的学习门槛。因此，我决定编写一系列关于D3.js的实际应用文章，希望通过这些文章能够帮助更多的人了解并掌握D3.js的使用方法。

本系列文章将涵盖使用D3.js结合HTML5 Canvas实现的各种实用功能，例如数据统计图表的展示、地理信息的可视化等。所有代码已托管在开源平台上，地址为：http://git.oschina.net/0604hx/d3lesson，欢迎有兴趣的朋友克隆代码进行学习和实验。

为了确保项目的顺利运行，建议的开发环境配置为Java 7及以上版本、Tomcat 7.0.47或更高版本（考虑到后续可能需要用到WebSocket功能，故推荐使用Java EE 7和Tomcat 7+）。此外，本项目使用IntelliJ IDEA 13作为开发工具，并采用了Freemarker作为视图层的技术栈。

本章节将重点介绍D3.js的基础操作，包括但不限于元素的选择、动态属性和样式的修改、动画效果的添加以及鼠标事件的监听。示例代码不仅展示了如何操作HTML元素（如div、p、span等），还涉及到了SVG图形元素（如圆圈、矩形、线条等）的处理。

特别值得一提的是，D3.js中的数据绑定功能非常强大。例如，通过data()方法可以轻松地将数据集与DOM元素关联起来，而enter()方法则用于处理数据集中的新数据点，自动为这些数据点创建相应的DOM元素。下面是一段简单的示例代码，演示了如何使用D3.js创建并填充一系列div元素：

// 创建一个包含10个整数的数组
var data = d3.range(10);
// 选择所有带有test类名的div元素，并将数据绑定到这些元素上
// 使用enter()方法为数据集中的每一个数据项创建一个新的div元素
// 最后，设置每个div元素的类名和文本内容
d3.selectAll("div.test")
    .data(data)
    .enter()
    .append("div")
    .attr("class", "test")
    .html(function(d) { return d; });

将上述项目部署至Tomcat服务器后，您可以通过浏览器访问项目的主页，页面上提供了三个链接，分别指向不同的示例页面：

• 页面1：使用D3.js操作div元素，点击屏幕可随机改变div的位置；
• 页面2：类似页面1，但将div元素替换为SVG的矩形元素；
• 页面3：深入探讨D3.js对SVG基本元素的操作，同时讲解了data()、enter()和exit()等核心方法的应用。

以下是页面3的一个截图，展示了如何使用D3.js动态创建和管理SVG图形元素：

页面3的核心代码片段如下所示，展示了如何根据用户输入的命令动态创建或移除SVG图形元素：

function work(cmd) {
    cmd = cmd || '';
    if (cmd === 'circle') {
        var circle = g.append("circle")
            .attr("class", "child")
            .attr("cx", random(width))
            .attr("cy", random(height))
            .attr("r", random(100) + 20)
            .attr("fill", colors(count));
        count++;
    } else if (cmd === 'rect') {
        var rect = g.append("rect")
            .attr("class", "child")
            .attr("x", random(width))
            .attr("y", random(height))
            .attr("width", random(100) + 20)
            .attr("height", random(100) + 20)
            .attr("fill", colors(count));
        count++;
    } else if (cmd === 'line') {
        var line = g.append("line")
            .attr("class", "child")
            .attr("x1", random(width))
            .attr("y1", random(height))
            .attr("x2", random(width))
            .attr("y2", random(height))
            .attr("stroke", colors(count));
        count++;
    } else if (cmd === 'clear') {
        lastest.attr("opacity", 1)
            .transition()
            .duration(duration)
            .attr("opacity", 0)
            .each("end", function() {
                d3.select(this).remove();
            });
    } else if (cmd === 'clearAll') {
        g.selectAll(".child")
            .attr("opacity", 1)
            .transition()
            .duration(duration)
            .delay(function(d, i) { return 50 * i; })
            .attr("opacity", 0)
            .each("end", function() {
                d3.select(this).remove();
            });
    }
}

完整代码可在以下链接中查看：http://git.oschina.net/0604hx/d3lesson/blob/master/web/WEB-INF/templates/chapter01/svg2.ftl。