d3.js更新链接小多图表的模式

Question

我无法为以下可视化创建更新模式。它是一个链接的折线图，显示了整个页面中的多个数据组。

考虑如下结构的数据：

data = [
    {
        _id: groupA,
        values: [
            {
                date: 1/1/2016,
                y = 1
            },
            {
                date: 1/1/2016,
                y = 2
            },
            {
                date: 1/1/2016,
                y = 3
            }
        ]
    },
    {
        _id: groupB,
        values: [
            {
                date: 1/1/2016,
                y = 4
            },
            {
                date: 1/1/2016,
                y = 5
            },
            {
                date: 1/1/2016,
                y = 6
            }
        ]
    },
]

当前模式，适用于初始加载：

...

var div = d3.select(this)
    .selectAll(".chart")
    .data(data);

div.enter()
    .append("div").attr("class", "chart")
    .append("svg").append("g");

var svg = div.select("svg")
    .attr("width", width + margin.left + margin.right )
    .attr("height", height + margin.top + margin.bottom );

var g = svg.select("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var lines = g.append("g");

lines.append("path")
    .attr("class", "area")
    .style("pointer-events", "none")
    .attr("d", d => area(d.values))
    .style("fill", d => color(d._id));

lines.append("path")
    .attr("class", "line")
    .style("pointer-events", "none")
    .attr("d", d => line(d.values));

...

如果我可以让数据连接处理g，它应该可以正常工作，但无论我尝试什么 - 例如var g = svg.selectAll("g").data(d => {return {_id: d._id, values: d.values} }) - 没什么用。

非常感谢任何帮助。