1

假设我有一个格式如下的列表：

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);
4

1 回答 1

2

我不知道您为什么需要这个（很难阅读该输出），但它是：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 很丑（但超级兼容），因为我是从这个（可读性很好的）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

于 2013-09-26T22:42:56.227 回答