d3更新数据和更新graphics
我在d3中有以下简单的一行，但没有一个问题，试图找出如何传递data2和更新行以反映更改。
<!DOCTYPE html> <html lang="en"> <head> <title>D3 Line Chart Demo</title> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="style.css"> <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="d3.min.js" type="text/javascript" charset="utf-8"></script> <body> <button class="first last" onclick="transition()"> Update </button> <div id="chart"></div> </body> <script> var data = [3, 7, 9, 1, 4, 6, 8, 2, 5]; var data2 = [3, 7, 9, 1, 4, 6, 8, 2, 15]; var width = 600; var height = 400; var max = d3.max(data); x = d3.scale.linear().domain([0, data.length - 1]).range([0, width]); y = d3.scale.linear().domain([0, max]).range([height, 0]); vis = d3.select('#chart') .style('margin', '20px auto') .style('width', "" + width + "px") .append('svg:svg') .attr('width', width) .attr('height', height) .attr('class', 'viz') .append('svg:g'); vis.selectAll('path.line') .data([data]) .enter() .append("svg:path") .attr("d", d3.svg.line().x(function(d, i) { return x(i); }) .y(y)); </script> </html> 我是D3的新手，但是这是我发现的，我主要从这里的sparklines例子中弄清楚了这一点 。
用下面的代码来画线：
vis.selectAll('path.line') .data([data]) .enter() .append("svg:path") .attr("d", d3.svg.line().x(function(d, i) {return x(i); }).y(y));
分别生成线路：
var line = d3.svg.line().x(function(d, i) { return x(i); }).y(y)
然后将其应用于数据：
vis.selectAll('path.line') .data([data]) .enter() .append("svg:path") .attr("d", line);
那么当你想更新你所调用的数据时：
vis.selectAll("path") .data([data]) // set the new data .attr("d", line); // apply the new data values
sparklines示例还向您展示了如何为其设置animation:)
