1
d3.js.z에서 새로 왔습니다. 내 브라우저에서 y 축이 보이지 않습니다. x 축만 표시됩니다. 해결책을 찾으십시오.d3.js에서 y 축을 표시하는 방법
var barOffset=5;
var barWidth=50;
var width=700,height=700;
function sdf(data,key){
var objects=[];
for(key in data){
var g=data[key]
objects.push(g)
}
return objects;
}
var q=sdf(data);
console.log(q);
var xScale=d3.scale.ordinal()
.domain(q.map(function (d,i){return d.name;}))
.rangeBands([0,width]);
console.log(xScale);
var yScale=d3.scale.linear()
.domain([0,d3.max(q,function (d,i){return d.price;})])
.range([0,height]);
console.log(yScale);
var xAxis=d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(9);
var yAxis=d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var canvas=d3.select("body").append("svg")
.attr("height",height+10)
.attr("width",width+10);
canvas.append("g")
.call(xAxis)
// .attr("transform","translate(50,0)")
.attr("transform", "translate(0," + (height-98)+ ")")
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.04em")
.attr("dy", ".10em")
.attr("transform", function(d) {
return "rotate(-20)"
});
canvas.append("g")
.call(yAxis)
var svg=canvas.selectAll(".bar")
.data(q)
.enter()
.append("rect")
.attr("class","bar")
.attr("transform","translate(0,0)")
.attr("x",function(d,i){return xScale(d.name);})
.attr("y",function (d,i){return 600-yScale(d.price);})
.attr("height",function (d,i){return yScale(d.price);})
.attr("width",xScale.rangeBand()-10)
// .attr("x",function (d,i){return i*(barWidth+barOffset);})
//.attr("y",function (d,i){return 500-d.price;})
// .attr("height",function (d,i){return d.price;})
// .attr("width",barWidth)
.style("fill","steelblue");
var svg1=canvas.selectAll("text")
.data(q)
.enter().append("text")
.attr("x",function(d,i){return xScale(d.name)+27;})
.attr("y",function (d,i){return 600-yScale(d.price);})
.attr("fill","orange")
.text(function (d){return d.price;})
`
당신이 바이올린을 만들 수 있을까? 내가 붙여 넣은 코드에서 입력 데이터 q를 볼 수 없습니다. –