我有以下格式d3js无法解析JSON数据
[{
"dayTime1": {
"timestamp": ["01\/02\/2014 16:59", "02\/02\/2014 16:59", "03\/02\/2014 16:59", "04\/02\/2014 16:59", "05\/02\/2014 16:59", "06\/02\/2014 16:59", "07\/02\/2014 16:59", "08\/02\/2014 16:59", "09\/02\/2014 16:59", "10\/02\/2014 16:59", "11\/02\/2014 16:59", "12\/02\/2014 16:59"],
"phase1": ["33962", "34273", "45274", "46969", "54078", "53361", "46848", "15377", "15278", "27051", "48179", "30228"],
"phase2": ["34702", "33259", "39046", "45921", "57756", "58406", "58543", "30094", "31006", "46553", "26914", "47677"],
"phase3": ["15230", "15304", "15436", "16251", "15232", "19469", "15249", "13478", "16626", "19946", "18332", "16766"]
}
}]
json文件,在阅读这个我d3js代码给出了以下错误Uncaught TypeError: Object [object Array] has no method 'substring'
我访问该值使用d.dayTime1.timestamp
d.dayTime1.phase1
等。
$('#kwh').on('click', function() {
var endDate = new Date(Date.parse($('#to').val()));
$('#kwh').prop("disabled",true);
var margin = {
top: 50,
right: 20,
bottom: 50,
left: 100
},
width = 1000 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d/%m/%Y %H:%M").parse;
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(15);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(10);
var yAxis1 = d3.svg.axis().scale(y)
.orient("right").ticks(10);
var valueline = d3.svg.line()
.x(function(d) { return x(d.dayTime1.timestamp); })
.y(function(d) { return y((d.dayTime1.phase1)/1000); });
var valueline2 = d3.svg.line()
.x(function(d) { return x(d.dayTime1.timestamp); })
.y(function(d) { return y((d.dayTime1.phase2)/1000); });
var valueline3 = d3.svg.line()
.x(function(d) { return x(d.dayTime1.timestamp); })
.y(function(d) { return y((d.dayTime1.phase3)/1000); });
var svg = d3.select("#graph")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/* function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("yop")
.ticks(20)
}*/
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10)
}
d3.json("<?php echo base_url(); ?>uploads/<?php echo $username; ?>-dayTime1.json", function(error, data) {
data.forEach(function(d) {
d.dayTime1.timestamp = parseDate(d.dayTime1.timestamp);
d.dayTime1.phase1 = +d.dayTime1.phase1; //<===
d.dayTime1.phase2 = +d.dayTime1.phase2; // <===
d.dayTime1.phase3 = +d.dayTime1.phase3; // <===
});
x.domain(d3.extent(data, function(d) {return d.dayTime1.timestamp;}));
y.domain([0, d3.max(data, function(d) {
var decValue = Math.max(d.dayTime1.phase1, d.dayTime1.phase2, d.dayTime1.phase3);
return (decValue/1000);
})]);
svg.append("path")
.attr("class","line")
/* .style("stroke", "yellow");*/
.attr("d", valueline(data));
svg.append("path")
.attr("class", "line1")
.style("stroke", "red")
.attr("d", valueline2(data));
svg.append("path")
.attr("class", "line2")
.style("stroke", "green")
.attr("d", valueline3(data));
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis);
svg.append("g") // Add the Y Axis 1
.attr("class", "y1 axis")
.attr("transform", "translate("+width+",0)")
.call(yAxis1);
svg.append("text") // text label for the x axis
.attr("x", (width/2))
.attr("y", height + 50)
.style("text-anchor", "middle")
.style("font-weight", "bold")
.text("Date");
svg.append("text")
.attr("x", -200)
.attr("y", -40)
.attr("class","leftlegend")
.style("font-weight", "bold")
.text("KWH Per Phase");
});
/*svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
);*/
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
);
});
这是访问它的正确方法吗?
你应该包括你的d3js代码的相应部分。 – Sirko
您能否发布您的完整代码以及错误来自哪里? –
我已经更新了它 – Bazinga777