Question

我有一个json数据文件，如下所示：

data.json：

[{
    "name": "Jack"
    "age": 5,
    "quotes":[
    "I want a candy",
    "I want mommy",
    "I want bears"
]},{
    "name": "Jess"
    "age": 4,
    "quotes":[
    "I want a candy",
    "I want daddy",
    "I want dolls"
]},
...]

他们中有很多人，但你明白了。

所以我用这些数据创建了一个气泡图。每个泡泡都是一个孩子，孩子的大小由泡泡的大小来表示。这很好。它已经完成了。

我接下来要做的是，当您点击气泡时，所选小孩的引号会出现在 index.html 中的列表中：

<ul id="quotes">
   <li>I want a candy.</li>
   <li>I want mommy.</li>
   <li>I want dolls.</li>
</ul>

到目前为止，在我的CoffeeScript文件 quotes.coffee 中，我所拥有的相关部分如下：

rValue = (d) -> d.age
idValue = (d) -> d.name
textValue = (d) -> d.name
quotesValue= (d) -> d.quotes

updateQuotes = (id) ->
    if id
      for x in data when idValue(x) is id
        d3.select("#quotes").html("#{quotesValue(x)}")
    else
      d3.select("#quotes").html("<li>Click one to read.</li>")

如您所见，d3.select("#quotes").html("#{quotesValue(x)}")上方的行不会给我我想要的结果。我想知道如何循环遍历quotes数组以使值显示在<li>中的每个ul#quotes中。更好，但完全可选：每次点击气泡，我都会得到一个不同顺序的列表，而不是基于quotes数组的顺序。谢谢！

仅供参考：我发现了very useful snippet about binding nested data with D3。我试图把它加入我的失败......

updateQuotes = (id) ->
    node.classed("selected", (d) -> id == idValue(d))
    lists = d3.select("body").selectAll("ul")
              .data(data, (d, i) -> d.name)
    lists.enter().append("ul")
         .attr("class", (d) -> d.name)
    lists.exit().remove();

    lines = lists.selectAll("li").data((d) ->
      d.quotes
    , (d, i) ->
      console.log d
      d
    )
    lines.enter().append("li")
         .text((d,i) -> d)
    lines.exit().remove()

所以我在这里尝试通过D3创建一个新的<ul>。但是，在控制台中，它表示name未定义，我明白为什么，但我该如何解决？

循环遍历文本数组以创建D3＆amp;的随机顺序列表。的CoffeeScript

0 个答案: