D3.js：在條形圖酒吧，尺度並不是建模數據正確

https://codepen.io/juanf03/pen/YGyyjY?editors=1111 D3.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變換？ .....謝謝！

來源

2016-09-30 Juan

您的height和y計算已關閉。如果你指的是venerable bar chart example，它應該是：

rect.attr('y', function(d) { 
    return yScale(d[1]); 
    }); 

    rect.attr('height', function(d) { 
    return height - yScale(d[1]); 
    });

運行代碼：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <script data-require="[email protected]" data-semver="4.16.2" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.2/lodash.js"></script> 
 
    <style> 
 
    #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);*/ 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="container" class="container"> 
 
    <div id="title"> 
 
     US Gross Domestic Product by quarter 
 
    </div> 
 
    <div id="holder"></div> 
 
    <div class="notes"></div> 
 
    </div> 
 
    <script> 
 
    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 yScale(d[1]); 
 
     }); 
 

 
     rect.attr('height', function(d) { 
 
     return height - 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) { 
 

 
     }); 
 

 

 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-09-30 23:43:59 Mark

它不工作：S，不顯示任何圖形https://codepen.io/juanf03/pen/YGyyjY？編者= 1111 – Juan

@Juan，什麼「圖形」沒有顯示？ – Mark

酒吧沒有顯示，只有Y軸.....運行你的代碼片段，你會看到.... – Juan

D3.js：在條形圖酒吧，尺度並不是建模數據正確

回答

相關問題