Add dots on a multi line D3.js Graph with nested d

问题:

I am a D3.js newbie and need some help.

I have a Multiline Graph generated from JSON data:

        "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"
            },

As you see in here http://jsfiddle.net/hapypork/JYS8n/66/ it is working. But I want dots/circles and each data point and not like it is now, just 3 dots on each graph. I need to iterate through the nested data, I guess. But how?

Thank you for helping me.

回答1:

You need nested selections for this:

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

Complete demo here.