현재 D3 v4를 사용하여 x 축에 레이블이있는 간단한 선형 차트를 작성하려고합니다. 라벨을 올바르게 생성하는 방법을 잘 모르겠습니다. 또한 https://gist.github.com/pebblexe/0fa48e4b10426ccf3d339b9e9060e727d3 - x 축의 레이블 생성에 문제가 발생했습니다.
어떻게 하나 https://bl.ocks.org 작동하는 요점을 가야 않습니다 여기
내 요점입니까?시간과 인내심을 가져 주셔서 감사합니다.
x 축에서 원하는 축척의 종류가 혼란 스럽습니다. 지금은 scaleTime을 사용하고 있는데 x 값이 이 아니기 때문에 날짜 또는 시간이 아닙니다. 귀하의 선택은 다음 scaleLinear (귀하의 모든 값이 numeric and continuous 인 경우 - 귀하가 분석 기능에서 수행하려는 것으로 보이는 것)입니다. 하지만 나는 정말로 scaleOrdinal이 귀하의 데이터에 더 적합하다고 생각합니다 (특히 scalePoint).
전체 실행 코드 :
<!DOCTYPE html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart0"></div>
<script>
var data = {
"studyGuide": {
"count": 20,
"avgTime": "4 minutes and 32 seconds",
"unitCount": [{
"name": "welcome",
"count": 3
}, {
"name": "1",
"count": 10
}, {
"name": "2",
"count": 5
}, {
"name": "3",
"count": 12
}, {
"name": "4",
"count": 15
}, {
"name": "5",
"count": 2
}, {
"name": "6",
"count": 7
}]
}
};
var dataParsed = data['studyGuide']['unitCount'];
// set the dimensions and margins of the graph
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// set the ranges
var x = d3.scalePoint().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
.x(function(d) {
return x(d.name);
})
.y(function(d) {
return y(d.count);
});
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#chart0").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 + ")");
// format the data
dataParsed.forEach(function(d) {
d.count = +d.count;
});
console.log("dataParsed", dataParsed);
// Scale the range of the data
x.domain(dataParsed.map(d => d.name));
y.domain([0, d3.max(dataParsed, function(d) {
return d.count;
})]);
// Add the valueline path.
svg.append("path")
.data([dataParsed])
.attr("class", "line")
.attr("d", valueline)
.style("fill", "none")
.style("stroke", "steelblue")
.style("stroke-width", "2px");
// Add the X Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the Y Axis
svg.append("g")
.call(d3.axisLeft(y));
</script>이 차단 문제를 해결하려면, 당신은 index.html을 이름을 붙일 기본 HTML 파일이 필요합니다, 여기에 코드가 같이 있어요 블록 요점 : https://bl.ocks.org/larsenmtl/93cb0b5a5201d63e679826877406b606
고마워요! 그것은 정말로 내 문제였습니다. 또한 bl.ocks.org가 어떻게 작동하는지 설명해 주셔서 감사드립니다. – pebblexe
@pebblexe, 이것이 문제를 해결하면, 내 대답 옆의 "체크 표시"를 확인하십시오. 그러면 질문이 완료되고'd3.js '답변 통계가 개선됩니다. – Mark
죄송합니다. 잊어 버렸습니다. – pebblexe