使用d3.js在绑定数据内数组(以恒定性动态生成d3.svg.line）

我试图（动态）生成一组divs，绑定到一些数据，每个div包含一些文本和一个带行的SVG。

如果我想一次做一个，这个代码有效：

var ccg = [40, 100, 1, 5, 25, 10];
var lineFunction = d3.svg.line()
                      .x(function(d, i) { return width-(i*10); })
                      .y(function(d, i) { return height-d; })
var myContainer = d3.select("body").append("div")
var svgContainer = myContainer.append("svg")
                                 .attr("width", "10px")
                                 .attr("height", "10px");
var correlogram = svgContainer.append("path")
                         .attr("d", lineFunction(ccg))

到目前为止还不错。现在我想更新一个数据数组，并让它动态地更新DOM:

var width=100,
    height=100;
var clusters = [
{id: "1",
    ccg: [40, 100, 1, 5, 25, 10] },
{id: "2", 
    ccg: [41, 101, 11, 51, 21, 11] },
{id: "3", 
    ccg: [42, 130, 13, 53, 21, 101] },
]
var lineFunction = d3.svg.line()
                    .x(function(d, i) { return width-(i*10); })
                    .y(function(d, i) { return height-d; })
                    .interpolate("step-after");
var clusterView = d3.select("body").append("div")
var clusterDivs = clusterView.selectAll(".cluster")
                        .data(clusters, function(d) {return d.id});
var cluster = clusterDivs.enter()
                        .insert("div", ".cluster")
var lineFunction = d3.svg.line()
                     .x(function(d, i) { return width-(i*10); })
                     .y(function(d, i) { return height-d; })
                     .interpolate("step-after");
var svgContainer = cluster.append("svg")
                    .attr("width", width)
                    .attr("height", height);

svgContainer.append("path")
.data(function (d) {return d.ccg;})
.enter()
.attr("d", function(d) {return lineFunction(d)})
cluster.append("div")
    .text(function(d) { return d.id; });

我犯了一个错误。CCD_ 2。

我尝试过各种方法：将函数直接放入.attr中似乎"有效"，只是它不返回该属性的任何输出。

基本上，给定输入数组clusters：如何从每个子数组ccg生成不同的行？我读过关于嵌套选择的教程，但不确定它是否真的能回答我的问题，因为你不能将每个线顶点绑定到一个数据点。。。