绑定数据中的数组（动态生成 d3.svg.line 具有稳定性）和 d3.js

Question

我正在尝试（动态地）生成一组 div，绑定到一些数据，每个 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; });

...我收到错误消息。 "TypeError: Cannot read property 'ccg' of undefined"。

我尝试了各种方法：将函数直接放入 .attr 似乎 'work' 除了它 return 该属性没有任何输出。

基本上，给定输入数组 clusters：如何从每个子数组 ccg 生成不同的行？我已阅读有关嵌套选择的教程，但不确定它是否真的回答了我的问题，因为您无法将每个线顶点绑定到数据点...

Answer 1

见http://jsfiddle.net/henbox/9my6Lznc/

替换：

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

与：

svgContainer.append("path")
  .datum(function (d) {return d.ccg;})
  .attr("d", function(d) {return lineFunction(d)})

将 data 切换为 datum 并摆脱 enter()。有关 data 和 datum 之间差异的更多讨论，请参阅：.

data 加入一个数组，而你有对象（例如 {id: "2", ccg: Array[6]}）

绑定数据中的数组（动态生成 d3.svg.line 具有稳定性）和 d3.js

Array within bound data (dynamically generating d3.svg.line with constancy) with d3.js

javascript

arrays

svg

object

d3.js