基础
首先,我们需要一个HTML文件来引入D3.js库,并准备一个画布来放置我们的图表。
创建简单的线图
创建柱状图
创建饼图
// 假设我们有以下数据
var data = [4, 8, 15, 16, 23, 42];
// 创建SVG画布和比例尺
var svg = d3.select("svg").attr("width", 500).attr("height", 500);
var radius = Math.min(svg.attr("width"), svg.attr("height")) / 2;
// 创建弧度比例尺
var arc = d3.arc().outerRadius(radius).innerRadius(0);
var pie = d3.pie().value(function(d) { return d; });
// 绘制饼图
var g = svg.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")");
var arcs = g.selectAll("arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
arcs.append("path")
.attr("d", arc)
.attr("fill", function(d, i) { return d3.schemeCategory10[i]; });
arcs.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.text(function(d) { return d.data; });
交互性与动画
交互性示例:添加悬停效果到柱状图
// 假设已有柱状图基础代码
// ...
// 添加悬停效果
g.selectAll(".bar")
.on("mouseover", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("fill", "orange"); // 鼠标悬停颜色变化
// 显示数据提示
var tooltip = g.append("text")
.attr("class", "tooltip")
.attr("x", x(d) + x.bandwidth() / 2)
.attr("y", y(d) - 10)
.text(d);
})
.on("mouseout", function(event, d) {
d3.select(this)
.transition()
.duration(200)
.attr("fill", "steelblue"); // 恢复原始颜色
// 移除数据提示
g.selectAll(".tooltip").remove();
});
动画示例:平滑过渡线图数据更新
// 假设已有线图基础代码
// ...
// 更新数据
var newData = [8, 15, 16, 23, 42, 45];
// 更新比例尺域
x.domain(d3.extent(newData));
y.domain([0, d3.max(newData)]);
// 更新轴
g.select(".axis--x").transition().duration(750).call(xAxis);
g.select(".axis--y").transition().duration(750).call(yAxis);
// 更新路径
var path = g.select(".line");
path.datum(newData).transition().duration(750).attr("d", line);
复杂图表:力导向图
力导向图展示节点和边的关系,非常适合网络、社交图谱等数据的可视化。
地图可视化
D3.js可以与地理数据格式如GeoJSON配合,创建互动式地图。这包括国家、州、城市边界等。
基本步骤:
加载地图数据:使用D3的d3.json或d3.geoJson加载GeoJSON数据。
创建比例尺:定义地理投影和比例尺,如Mercator或Albers USA。
绑定数据并绘制:将GeoJSON数据绑定到SVG路径元素,并应用投影。
添加交互:如悬停效果、点击事件等。
d3.json("world.geojson").then(function(geoData) {
var svg = d3.select("svg"),
projection = d3.geoMercator().scale(130).translate([400, 250]),
path = d3.geoPath().projection(projection);
svg.selectAll("path")
.data(geoData.features)
.enter().append("path")
.attr("d", path)
.attr("fill", "#ccc")
.attr("stroke", "#fff");
});
数据绑定与动态更新
基本步骤:
初始化数据绑定:使用data()方法绑定数据到DOM元素。
Enter, Update, Exit模式:处理新数据、更新现有数据及移除无用数据。
动态更新:监听数据变化,重新执行绑定和渲染流程。
复杂图表与高级技巧
高级技巧:
使用D3的组件库:像D3fc这样的库提供了高级图表组件,简化复杂图表的创建。
动画与过渡:利用transition()方法创建流畅的动画效果。
交互性:增加点击、悬停事件,使用brush和zoom功能增强用户体验。
性能优化:合理使用selectAll(), data(), enter(), exit()减少DOM操作,使用requestAnimationFrame()优化动画性能。
领取专属 10元无门槛券
私享最新 技术干货