다음 코드는 내 현재 차트를 보여줍니다. "2015", "2016", "2017", "2018"및 "2019"연도를 표시하도록 xaxis의 레이블을 편집하려면 어떻게해야합니까? 나는이 D3에서 정말 새롭다.
var data = new Array (1, 2, 3, 4, 5);
var x_scale = d3.scale.linear()
.domain([0,d3.max(data, function(d,i) { return i+1 })])
.range([62,540])
var xAxis = d3.svg.axis()
.scale(x_scale)
.tickSize(0,0)
.ticks(5)
.tickPadding(6)
.orient("bottom");
d3.select("svg").append("g")
.call(xAxis)
.attr("class","xaxis")
.attr("transform","translate(0,364)");
var y_scale = d3.scale.linear()
.domain([d3.max(data, function(d) { return d }),0])
.range([54,364])
var yAxis = d3.svg.axis()
.scale(y_scale)
.tickSize(-10,0)
.ticks(5)
.tickPadding(6)
.orient("left");
d3.select("svg").append("g")
.call(yAxis)
.attr("class","yaxis")
.attr("transform","translate(62,0)");
var saeule = d3.select("#saeulen").append("g")
.attr("class","saeule")
.style("color","#F49600");
var bar_padding=10;
var bar_width=x_scale(1)-x_scale(0)-bar_padding;
saeule.selectAll("g")
.data(data)
.enter()
.append ("rect")
.attr("fill","#F49600")
.attr("x" , function (d,i) { return (x_scale(i+1) - (bar_width/2)) })
.attr("y", function (d,i) { return (y_scale(d)) })
.attr("width", bar_width)
.attr("height", function (d,i) { return (y_scale(0)-y_scale(d)) });
x 축에 다음과 같이 고유 한 눈금 형식을 지정할 수 있습니다.
var xAxis = d3.svg.axis()
.scale(x_scale)
.tickSize(0,0)
.ticks(5)
.tickPadding(6)
.orient("bottom")
.tickFormat(function(d){return d+2015;});//will return 2015 for 0 2016 for 1 etc.
여기에 작업 코드
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다