d3 gestapelte Bar mit ungewöhnlichen Daten

Ich möchte ein gestapeltes Balkendiagramm erstellen, aber nicht den üblichen Weg mit Serien, die gestapelt werden.d3 gestapelte Bar mit ungewöhnlichen Daten

genaue Daten Beispiel:

[ 
{"issue":19,"created_at":"2017-01-06T14:24:04.247Z","time":"00:30:00"}, 
{"issue":18,"created_at":"2017-01-06T14:24:04.247Z","time":"02:00:00"}, 
{"issue":18,"created_at":"2017-01-07T14:24:04.247Z","time":"00:10:00"}, 
{"issue":19,"created_at":"2017-01-07T14:24:04.247Z","time":"00:10:00"}, 
{"issue":17,"created_at":"2017-01-07T14:24:04.247Z","time":"02:00:00"}, 
{"issue":17,"created_at":"2017-01-07T14:24:04.247Z","time":"06:00:00"}, 
{"issue":17,"created_at":"2017-01-08T14:24:04.247Z","time":"06:00:00"}, 
{"issue":17,"created_at":"2017-01-09T14:24:04.247Z","time":"06:00:00"}, 
{"issue":17,"created_at":"2017-01-09T14:24:04.247Z","time":"00:30:00"}, 
{"issue":18,"created_at":"2017-01-10T14:24:04.247Z","time":"00:10:00"}, 
{"issue":19,"created_at":"2017-01-10T14:24:04.247Z","time":"02:00:00"}, 
{"issue":17,"created_at":"2017-01-10T14:24:04.247Z","time":"06:00:00"}, 
{"issue":19,"created_at":"2017-01-10T14:24:04.247Z","time":"02:00:00"}, 
{"issue":19,"created_at":"2017-01-11T14:24:04.247Z","time":"00:10:00"} 
]

Ich mag erstellen jetzt ein gestapelte-Balkendiagramm für die letzten sieben Tage, in denen Werte (Zeitfeld) für jeden Tag gestapelt und gefärbt von id (Ausgabe).

Das Problem ist alle Beispiele i gefunden Serie tun Stapel

Ich habe verschiedene Mengen von Werten pro Tag: 0 < = #values (Tag)

kann mir jemand zeigen, ein kurzes Beispiel (http://jsfiddle.net/qbmy76on/3/) einen gestapelten Balken aus diesen Daten mit d3 zu erhalten (Wert könnte auch ein einfacher ganzzahliger Wert sein, wie im folgenden Beispiel)

mit Charts.js habe ich einen Prototyp (mit Minuten) realisiert, aber ich möchte zu wechseln d3 für zukünftige Funktionen.

http://i.imgur.com/LdtsusH.png

Quelle

2017-01-12 peter Flow

Nur ein Tipp: Verwenden Sie ':', nicht '=', um dies zu einem gültigen Objekt zu machen, und wickeln Sie die Objekte in ein Array. –

Ja, nur ein paar Beispieldaten, das ist nicht das Problem .. ich weiß nur nicht, wie man einen solchen eleganten Fall in d3 realisiert. –

Dies ist die Datenstruktur, die ich gerade in meiner js-Datei habe: http://i.imgur.com/tljd89p.png –

ich habe jetzt die folgenden Daten und wollen es (values.object.time) pro Tag gestapelt Grundstück:

[ 
{ 
"key": "2017-01-07", 
"values": [ 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-07", 
    "time": 10 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-07", 
    "time": 360 
    } 
] 
}, 
{ 
"key": "2017-01-08", 
"values": [ 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-08", 
    "time": 360 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-08", 
    "time": 360 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-08", 
    "time": 10 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-08", 
    "time": 360 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-08", 
    "time": 360 
    } 
] 
}, 
{ 
"key": "2017-01-09", 
"values": [ 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-09", 
    "time": 120 
    }, 
    { 
    "user": 1, 
    "issue": 22, 
    "created_at": "2017-01-09", 
    "time": 120 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-09", 
    "time": 30 
    } 
] 
}, 
{ 
"key": "2017-01-10", 
"values": [ 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-10", 
    "time": 360 
    }, 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-10", 
    "time": 360 
    } 
] 
}, 
{ 
"key": "2017-01-11", 
"values": [ 
    { 
    "user": 1, 
    "issue": 21, 
    "created_at": "2017-01-11", 
    "time": 360 
    } 
] 
}, 
{ 
"key": "2017-01-12", 
"values": [ 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-12", 
    "time": 120 
    } 
] 
}, 
{ 
"key": "2017-01-13", 
"values": [ 
    { 
    "user": 1, 
    "issue": 22, 
    "created_at": "2017-01-13", 
    "time": 30 
    }, 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-13", 
    "time": 60 
    }, 
    { 
    "user": 1, 
    "issue": 20, 
    "created_at": "2017-01-13", 
    "time": 10 
    } 
] 
} 
]

so etwas zu bekommen: http://i.imgur.com/xZ5oMAo.png Geige: https://jsfiddle.net/vt3990yr/26/

Quelle

2017-01-13 16:16:40

d3 gestapelte Bar mit ungewöhnlichen Daten

Antwort

Verwandte Themen