tutorials/d3js_data

D3.js 数据绑定教程

数据绑定是 D3.js 中一个核心概念，它允许我们将数据映射到 DOM 元素上，从而实现动态的数据可视化。以下是一些关于 D3.js 数据绑定的基础知识和实践技巧。

数据绑定基础

D3.js 提供了多种数据绑定方法，其中最常用的是 .data() 方法。该方法可以将数据数组绑定到选择集上的元素。

d3.select("body").selectAll("div").data(data).enter().append("div").text(function(d) { return d.name; });

在上面的代码中，我们首先选择 <body> 元素，然后选择其中的 <div> 元素。接着，我们使用 .data() 方法将数据数组 data 绑定到这些 <div> 元素上。对于每个数据项，我们添加一个新的 <div> 元素，并设置其文本内容为数据项的 name 属性。

动态更新

数据绑定不仅允许我们添加新的元素，还可以更新现有元素。当数据发生变化时，D3.js 会自动更新 DOM 以反映这些变化。

data.push({ name: "New Element" });
d3.select("body").selectAll("div").data(data).text(function(d) { return d.name; });

在上面的代码中，我们向数据数组 data 中添加了一个新的元素，并更新了所有 <div> 元素的文本内容。

例子：饼图

以下是一个使用 D3.js 绘制饼图的例子。

var data = [30, 70];
var width = 100;
var height = 100;
var radius = Math.min(width, height) / 2;

var pie = d3.layout.pie().value(function(d) { return d; });
var arc = d3.svg.arc().outerRadius(radius).innerRadius(0);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return color(d.data); });

在这个例子中，我们首先创建了一个数据数组 data，然后使用 D3.js 的 pie() 和 arc() 函数创建了一个饼图。最后，我们将饼图添加到 SVG 元素中。

tutorials/d3js_data_binding

数据绑定基础

动态更新

例子：饼图

更多资源