javascript - 在具有嵌套数据的多行 D3.js 图形上添加点

Question

我是 D3.js 新手，需要一些帮助。

我有一个从 JSON 数据生成的多线图:

        "City": "New York",
        "Data": [
            {
                "Date": "20111001",
                "Value": "63.4"
            },
            {
                "Date": "20111002",
                "Value": "58.0"
            },
...
        ]
    },
    {
        "City": "San Francisco",
        "Data": [
            {
                "Date": "20111001",
                "Value": "62.7"
            },
            {
                "Date": "20111002",
                "Value": "59.9"
            },

正如您在这里看到的 http://jsfiddle.net/hapypork/JYS8n/66/这是工作。但我想要点/圆圈和每个数据点，而不是像现在这样，每个图表上只有 3 个点。我想我需要遍历嵌套数据。但是怎么办？

谢谢你帮助我。

Answer 1

你需要nested selections为此:

svg.selectAll("g.dot")
    .data(data)
    .enter().append("g")
    .attr("class", "dot")
    .selectAll("circle")
    .data(function(d) { return d.Data; })
    .enter().append("circle")
    .attr("r", 6)
    .attr("cx", function(d,i) {  return x(d.Date); })
    .attr("cy", function(d,i) { return y(d.Value); })

完整演示 here .