在多行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。