在d3中訪問不同級別的嵌套列表

Question

假設我有一個具有以下格式的列表：

dataset = [["10", "asdf"], ["20", "jkl"], ["30", "bla"]]

我想在每個嵌套列表的第二個元素中為每個單獨的字符添加文本。 我還希望每個字母的x位置由列表的第一個元素確定。 因此，例如，中的x位置a應該是10 ，對於s - 11 ， d - 12 ...為j - 20 ，用於k - 21 ，等等。

在到目前為止的代碼中，我只顯示第一個字母，因為我沒有遍歷列表的正確部分：

chartBody.selectAll("exampletext")
                       .data(dataset)
                       .enter()
                       .append("text")
                       .attr("class", "exampletext")
                       .text(function(d) {
                            for (var i=0; i <= d[1].length; i++)
                                {
                                    return d[1][i];
                                }
                       })
                       .attr("x", function(d) {
                            for (var i=0; i <= d[1].length; i++)
                                {
                                    return xScale(+d[0]) + i; 
                                }
                       })
                       .attr("y", h/2);

Answer 1

我不知道您為什么需要它（很難讀取該輸出），但是這里是： http : //jsfiddle.net/uNQA9/ 。

重要的更改是在饋入d3之前建立字母和位置的列表：

var dataset, h, i, letter, pair, r, viewport, xScale, _i, _j, _len, _len1, _ref;

dataset = [["10", "asdf"], ["20", "jkl"], ["30", "bla"]];

r = [];    
i = 0;

/*loop each pair, push into a new array */


for (_i = 0, _len = dataset.length; _i < _len; _i++) {
  pair = dataset[_i];
  i = 0;
  _ref = pair[1];
  for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
    letter = _ref[_j];
    r.push([+pair[0] + i, letter]);
    i++;
  }
}

該JS丑陋（但符合uber規范），因為我是從這部分（易讀的）coffeescript中獲得的：

dataset = [["10", "asdf"], ["20", "jkl"], ["30", "bla"]]
r = []
i = 0 
#loop each pair, push into a new array
for pair in dataset
  i = 0
  for letter in pair[1]
    r.push([+(pair[0]) + i, letter]) 
    i++ 

我在這里制作了一個更具可讀性的版本： http : //jsfiddle.net/UtUeP/ 。 如果您想增加字母之間的差異，請查看d3顏色函數，例如： d3.scale.category10() ： https : //github.com/mbostock/d3/wiki/Ordinal-Scales