我像这样创建了一个相当简单的Donutchart
const chart = {};
chart.create = function (node, data) {
const svg = d3
.select(node)
.append('svg')
.attr('class', 'pie')
.attr('width', width)
.attr('height', height);
const g = svg
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
this.draw(g, data, arc);
};
chart.draw = function (g, data, arc) {
const path = g
.selectAll('path')
.data(pie(data))
.enter()
.append('g')
.append('path')
...;
path
.transition()
.duration(duration)
...;
path
.exit()
.remove();
};
node
是DOM Element
用来绘制图表的D3
。
请注意,data
和node
来自另一个文件。
现在我想更新图表
chart.update = function(node, data) {
this.draw(node, data);
}
我只能传递给chart
的信息是node
和data
。这意味着我必须以某种方式重写chart.draw()
,因为该依赖于g
,因为它是在chart
文件中创建的,所以我无法通过它。
我正在考虑使用ndoe
并在g
函数中选择chart.draw()
。更改代码,看起来像这样
chart.create = function (node, data) {
const svg = d3
.select(node)
.append('svg')
.attr('class', 'pie')
.attr('width', width)
.attr('height', height);
svg
.append('g')
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');
this.draw(node, data, arc);
};
chart.draw = function (node, data, arc) {
const path = d3.select(node).... // ???
.selectAll('path')
.data(pie(data))
.enter()
.append('g')
.append('path')
....;
path
.transition()
.duration(duration)
...;
path
.exit()
.remove();
};
但是,我不确定如何从g
中选择node
。
const path = d3.select(node).
。如何从传递到g
的{{1}}中选择node
?