D3.js를 사용하여 간단한 차트를 만들 때이 오류가 발생했습니다.
var data = {
"Elektrotehnički fakultet Osijek": { "2008/09":1539, "2009/10":1678, "2010/11":1873, "2011/12":2231, "2012/13":2192, "2013/14":1841},
"Fakultet elektrotehnike i računarstva Zagreb": { "2008/09":4795, "2009/10":4538, "2010/11":4320, "2011/12":4913, "2012/13":4634, "2013/14":3290},
"Fakultet elektrotehnike strojarstva i brodogradnje Split": { "2008/09":2480, "2009/10":2685, "2010/11":2790, "2011/12":2769, "2012/13":2649, "2013/14":2633}
}
var margin = {top: 50, bottom: 70, left:70, right: 30};
var width = 700 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var timeFormat2 = d3.time.format('%Y');
function returnArray(){
var a = [];
var keys = Object.keys(data["Elektrotehnički fakultet Osijek"]);
for(var i = 0; i < Object.keys(data["Elektrotehnički fakultet Osijek"]).length; i++){
a.push(timeFormat2(new Date(keys[i].substring(0, keys[i].indexOf('/')))))
}
console.log(a);
return a;
}
var x = d3.time.scale()
.domain(returnArray())
.range([0, width/5, 2*width/5, 3*width/5, 4*width/5, 5*width/5]);
var y = d3.scale.linear()
.domain([0, 5000])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d, i) { return Object.keys(data["Elektrotehnički fakultet Osijek"])[i].replace(/_/g, ' '); });
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
var valueline = d3.svg.line()
.x(function(d, i) { return x(i); })
.y(function(d) { return y(d); });
var linechart = svg.append("path")
.attr("class", "line")
.attr("d", valueline(Object.values(data["Elektrotehnički fakultet Osijek"])))
.style("stroke", "blue")
.style("stroke-width", "2")
.style("fill", "none")
x 축에 서수 스케일을 사용하면 valueline의 x (i) 함수가 svg 내부에있는 유효한 값을 반환하고 선 차트는 정상적으로 그려집니다. 하지만 시간 척도를 사용하면이 값은 유효한 값인 240960입니다.이 숫자를 다음과 같이 추가하면 :
var valueline = d3.svg.line()
.x(function(d, i) { return x(i)+2409600; })
.y(function(d) { return y(d); });
코드가 작동하고 차트가 다시 정상적으로 그려집니다. 이 이상한 값을 얻는 이유와 수정 방법은 무엇입니까?
시간 척도를 사용하는 경우 날짜 를 전달할 것으로 예상합니다 . 이 줄 :
.x(function(d, i) { return x(i); })
배열 인덱스 값 (예 0: 1,, 2...)을 전달합니다.
이 작업을 수행하려면 전달하는 데이터를 valueline개체의 배열 로 변경해야 하며 각 개체는 x 날짜와 y 값을 갖습니다.
다음은 적절한 날짜 구문 분석을 사용한 전체 코드 스 니펫 리팩터링입니다.
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
</head>
<body>
<script>
var data = {
"Elektrotehnički fakultet Osijek": { "2008/09":1539, "2009/10":1678, "2010/11":1873, "2011/12":2231, "2012/13":2192, "2013/14":1841},
"Fakultet elektrotehnike i računarstva Zagreb": { "2008/09":4795, "2009/10":4538, "2010/11":4320, "2011/12":4913, "2012/13":4634, "2013/14":3290},
"Fakultet elektrotehnike strojarstva i brodogradnje Split": { "2008/09":2480, "2009/10":2685, "2010/11":2790, "2011/12":2769, "2012/13":2649, "2013/14":2633}
}
var margin = {top: 50, bottom: 70, left:70, right: 30};
var width = 700 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
var timeFormat2 = d3.time.format('%Y');
// this will end up being an array
// of objects with two properties, date and value
var properData = [];
for (key in data["Elektrotehnički fakultet Osijek"]){
var value = data["Elektrotehnički fakultet Osijek"][key],
date = timeFormat2.parse(key.split("/")[0]);
properData.push({
value: value,
date: date
})
}
var x = d3.time.scale()
.domain(d3.extent(properData, function(d){ return d.date }))
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 5000])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(function(d, i) { return Object.keys(data["Elektrotehnički fakultet Osijek"])[i].replace(/_/g, ' '); });
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(10);
var valueline = d3.svg.line()
.x(function(d, i) { return x(d.date); })
.y(function(d) { return y(d.value); });
var linechart = svg.append("path")
.attr("class", "line")
.attr("d", valueline(properData))
.style("stroke", "blue")
.style("stroke-width", "2")
.style("fill", "none")
</script>
</body>
</html>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다