在多行上添加点D3.js具有嵌套数据的图 [英] Add dots on a multi line D3.js Graph with nested data

问题描述

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

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

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

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

=http://jsfiddle.net/hapypork/JYS8n/66/ =nofollow> http://jsfiddle.net/hapypork/JYS8n/66/ 它是工作。但我想要点/圆和每个数据点，不像现在，每个图上只有3个点。我需要迭代通过嵌套的数据，我猜。但是如何？

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?

感谢您帮助我。

推荐答案

href =http://bost.ocks.org/mike/nest/ =noreferrer>嵌套选择：

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

演示此处。

这篇关于在多行上添加点D3.js具有嵌套数据的图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！