在使用d3.js
解析折线图时,我需要帮助首先,我想显示我的JSON文件:
[
{
"Paket": [
{
"farbe": "#ff0000",
"Koordinaten": [
{
"paketaufenthaltsort": " ",
"y": "5",
"x": "0"
},
{
"paketaufenthaltsort": "469/31 A 1; A 3; A 4",
"y": "5",
"x": "150"
},
{
"paketaufenthaltsort": "469/31 A 1; A 3; A 4",
"y": "0",
"x": "150"
}
],
"Paketnummer": "11000005"
}
],
"offset": "5",
"referenzzeitraum": "1440"
}
]
所以现在我想要一个带
的折线图X轴:paketaufenthaltsort y轴:y 用颜色:farbe
所以我尝试了以下内容:
d3.select("body").select("svg").remove();
var margin = {
top: 20,
right: 50,
bottom: 100,
left: 50
}, width = 1150 - margin.left - margin.right, height = 600 - margin.top
- margin.bottom;
var x = d3.scale.ordinal().rangeRoundPoints([0, width], 0);
var y = d3.scale.linear().rangeRound([height, 0]);
var ordinalScale = d3.scale.ordinal();
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
var svg = d3.select("body").append("svg").attr("width",
width + margin.left + margin.right).attr("height",
height + margin.top + margin.bottom).attr("id", "svg").append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
var line = d3.svg.line().x(function(d) {
return (x(d.paketaufenthaltsort));
}).y(function(d) {
return y(d.y);
});
var data;
d3.json("/fls2/rest/paketVerlaufChart", function(error, json) {
if (error) return console.warn("Error: " + error);
data = json;
var orte;
var pakete;
var koordinaten;
data.forEach(function(d) {
d.Paket.forEach(function(p) {
orte = p.Koordinaten.map(function(k) {
return k.paketaufenthaltsort;
});
});
});
pakete = data.map(function(d) {
return d.Paket;
});
data.forEach(function(d) {
koordinaten = d.Paket.map(function(p) {
return p.Koordinaten;
});
});
x.domain(orte);
y.domain([d3.min(data, function(c) {
return d3.min(c.Paket, function(v) {
return d3.min(v.Koordinaten, function(l) {
return l.y;
});
});
}), d3.max(data, function(c) {
return d3.max(c.Paket, function(v) {
return d3.max(v.Koordinaten, function(l) {
return l.y;
});
});
}), ]);
svg.append("g").attr("class", "x axis").attr("transform",
"translate(0," + height + ")").call(xAxis);
svg.append("g").attr("class", "y axis").call(yAxis);
var graphen = svg.selectAll(".graphen").data(koordinaten).enter().append("g")
.attr("class", "graphen");
graphen.attr("stroke", function(d) {
console.log(d.x);
return (d.farbe);
}).data(pakete.Koordinaten).enter().append("path").attr("class", "line")
.attr("d", function(d) {
console.log(d);
return line(d);
});
});
如果我调试,则会出现" TypeError:groupData未定义" 所以我需要来自pakete的farbe和来自pakete的koordinaten.Koordinaten
所以这是JSFIddle: http://jsfiddle.net/thomas190393/r0pdsp9s/1/
怎么了?
请帮帮我。