Javascript 在线更新模式和d3.selectAll功能
在测试基于D3.js的数据可视化代码时,我经常会对Bostock关于数据更新模式和Javascript 在线更新模式和d3.selectAll功能,javascript,d3.js,Javascript,D3.js,在测试基于D3.js的数据可视化代码时,我经常会对Bostock关于数据更新模式和D3.selectAll()函数的建议感到困惑。请允许我在下面引用一段代码来解释我试图实现的目标。由于我是这个强大的D3库的新手,如果你觉得这些问题很幼稚,请容忍我 所以,让我来说明问题。我创建了一个名为curve的对象,稍后在获取数据绘制曲线时尝试调用它,并在出现新数据集或轴范围发生更改时进一步更新它 var newCurve = function(Id) { 'use strict'; var cu
D3.selectAll()函数的建议感到困惑。请允许我在下面引用一段代码来解释我试图实现的目标。由于我是这个强大的D3库的新手,如果你觉得这些问题很幼稚,请容忍我
所以,让我来说明问题。我创建了一个名为curve的对象,稍后在获取数据绘制曲线时尝试调用它,并在出现新数据集或轴范围发生更改时进一步更新它
var newCurve = function(Id) {
'use strict';
var curvePath = function (data) {
'use strict';
var line = d3.line()
.x(function(d) { return this.x(d.x); }.bind(this))
.y(function(d) { return this.y(d.y); }.bind(this));
var curve = this.g.selectAll('path.line')
.data(data, function(d) { return d.y; });
curve.exit().remove();
curve.enter()
.append("path")
.attr("id", Id)
.attr("stroke-width", 1.0)
.attr('d', line(data));
return curve;
}
// method to feed data to line path
var curveDataFetch = function(data) {
'use strict';
var curve = curvePath.bind(this)(data);
}.bind(this);
return {
'curvePath' : curvePath,
'curveDataFetch' : curveDataFetch
};
};
只是想澄清一下,在上面的中,这个
变量指向一个对象,该对象包含d3.js的x
和y
函数,用于映射x和y域(并定义轴)。参数Id
只是分配给所有路径的Id的字符串。一般来说,这种模式很好用。通过从内部调用此函数可以正确创建一行,例如,d3.csv
或d3.json
,同时获取数据
然而,有两个问题
首先,如果要绘制一个新的数据集或轴的范围发生了变化,我似乎无法直接调用curveDataFetch
方法来转换数据。我需要做的是通过选择在前一行中创建的所有路径元素并重新绘制来物理删除。否则,前一行仍然存在。允许轻松更新数据的一般模式是什么
其次,我尝试使用d3.selectAll(Id)
来选择同一Id下的所有路径(因为我有意将同一Id分配给此处创建的所有路径),似乎只有第一个元素被实际选中。如何选择所有这些元素
您的智慧将受到高度赞赏。“因为我有意为所有路径分配相同的id”。。。ID必须是唯一的。用课堂来代替。@Gerado:谢谢。我怀疑这是否是问题所在。同样的技巧也适用于条形图。这(有时)是可行的,但它是无效的HTML。看看这里:如果我在同一个图上有几行,我想识别它们,我应该为每一行或每一条动态生成一个类吗?是的,只需将.attr(“id”,id)
更改为.attr(“class”,id)
。