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

我是一个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"
            },

正如你在这里看到的，它正在发挥作用。但我想要点/圆和每个数据点，不像现在，每个图形上只有3个点。我想我需要遍历嵌套数据。但是怎么做呢

谢谢您的帮助。

您需要：

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

完成演示