Question

我像这样创建了一个相当简单的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？

嵌套选择D3

0 个答案: