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

您需要嵌套选择:

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

在这里完成演示.