0
https://codepen.io/juanf03/pen/YGyyjY?editors=1111D3.js:在条形图酒吧,尺度并不是建模数据正确
我建模D3.js条形图和数据不被酒吧,如它的supossed是被代表。 ......这将是正确的图表
这是我的图表:
出于某种原因,我的秤看起来不是正确的...我用GDP订购了数据,并且在控制台上似乎是正确的。 json包含年份和年份本身的GDP。有没有人看到设置我的秤的问题?这是我的.js文件。
$('document').ready(function() {
var url = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json';
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
//build svg with class chart
var width=800, height=600, padding=50;
var canvas=d3.select('#holder').append('svg').attr('id','chart').style({"width":width,"height":height}).attr('transform','translate(' + padding + ',' + padding + ')');;
d3.json(url, function(data) {
let datausa=_.sortBy(data.data,1),barWidth=Math.ceil(width/data.data.length);
console.log(datausa);
var svg = d3.select("svg");
console.log(datausa);
d3.select(".notes").append("text").text(data.description);
var maxMinYearSet=d3.extent(datausa,function(d){
return d[0].substring(0,4);
});
//build x scale, year
var xScale=d3.time.scale()
.range([0,width])
.domain(maxMinYearSet);
//build y scale, gross dom prod
var maxY=d3.max(datausa,function(d){
return d[1];
});
var yScale=d3.scale.linear()
.domain([0,maxY])
.range([height-padding,0]);
//set up the x axis
var xAxis = d3.svg.axis().scale(xScale)
.orient("bottom")
.ticks(20);
//set up the y axis
var yAxis = d3.svg.axis().scale(yScale)
.orient("left")
.ticks(20);
// Add the X Axis
canvas.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
canvas.append("g")
.attr("class", "y axis")
.call(yAxis);
var rect= canvas.selectAll('rect.rectangle')
.data(datausa)
.enter()
.append('rect').attr('class','rectangle');
rect.attr('x',function(d,i){
return i*barWidth;
});
rect.attr('y',function(d){
return 0;
});
rect.attr('height',function(d){
return yScale(d[1]);
});
rect.attr('width',function(d){
return 20;
});
rect.on("mouseover", function(d){
console.log(d3.select(this));
});
rect.on("mouseleave",function(d){
});
});
});
这是我的HTML文件:
<div id="container" class="container">
<div id="title">
US Gross Domestic Product by quarter
</id>
<div id="holder">
</div>
<div class="notes">
</div>
</div>
和我的CSS:
#holder{
border: 1px black solid;
}
.rectangle{
fill:#0097A7;
margin:10px;
}
svg{
/*-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(180deg);
transform:scaleY(-1);
-moz-transform: scaleY(-1);*/
}
下图是颠倒为好,反正是有修正,如果没有使用CSS变换? .....谢谢!
它不工作:S,不显示任何图形https://codepen.io/juanf03/pen/YGyyjY?编者= 1111 – Juan
@Juan,什么“图形”没有显示? – Mark
酒吧没有显示,只有Y轴.....运行你的代码片段,你会看到.... – Juan