0
적어도 하나의 그래프 선을 표시하려고합니다. 나중에 두 번째 그래프를 추가하려고합니다. 이 라인에 도달하면 return line(d.values);
라인이 나타나면 무엇이든 나타납니다. this example으로 시작했는데 데이터 구조가이 예제의 것과 동일하며 모든 변수 이름을 유지했습니다. 을 console.log (도시) 내 구조는 동일 아이디어오류 : JSON 데이터가있는 D3.js 다중 선 그래프에서 d = "MNaN, 260L을 파싱합니다.
cities
VAR는 다음과 같습니다.?
[
{name:"count", values: [{date:1, temperature: 10}, {date:1, temperature: 10}]}
]
JS 대구 e는 다음과 같습니다.
var margin = {top: 20, right: 0, bottom: 20, left: 20},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) {
console.log(d)
return x(d.date);
})
.y(function(d) {
return y(d.temperature);
});
var svg = d3.select(".heartbeat").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 + ")");
d3.json("/static/data/test.json", function(error, data) {
color.domain(["one"]);
function get_vs(){
a = []
$.each(data, function(k, v){
if(v.hasOwnProperty("CN")){
a.push({"date": new Date(), "temperature": v.CN.count})
}else{
a.push({"date": new Date(), "temperature": 0})
}
})
return a
}
var cities = [
{
name: "count",
values: get_vs()
}
]
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }),
d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) { return color(d.name); });
});
이 보입니다 0 –
네 말이 맞아 -하지만 그건 구문 분석 오류가 발생합니다? 그냥 시도해 보려고 ... –
음계가 NaN을 반환합니다. 스케일이 반환하는 것은 경로 문자열의 일부이며 NaN은 불법입니다. –