定義座標系

我剛剛進入JavaScript和d3.js.請原諒這個簡單的問題，但我厭倦了看這個無濟於事。我相信這顯而易見而且簡單，但爲什麼這些柱狀圖是從上到下而不是從下往上繪製的。我試圖翻轉域和範圍的值，並嘗試轉換組，但似乎沒有任何工作。謝謝。定義座標系

<!DOCTYPE html> 
<html> 

<head> 
<title>Test</title> 

<script src="http://d3js.org/d3.v2.js"></script> 

<style type="text/css"> 
    .background 
    { 
     background-color:Gray; 
     border:solid 1px black 
    } 

    #container 
     { 
      margin:auto; 
     width:700; 
    } 

    body 
     { 
      margin:0px; 
     padding:0px; 
    } 

</style> 
</head> 

<body> 
<div id="container"></div> 


<script type="text/javascript"> 
    var data = {}; 

    data.distance = [3.17, 2.6, 3.08, 3.12, 3.14, 3.16, 3.19, 3.24, 3.21, 4.51, 3.18, 3.16,  3, 3.2, 3.07, 3.16, 3, 0.01, 2, 3.32, 3.33, 3, 3, 5, 3.41, 3.05, 3.01, 5, 5.03, 5, 1.68, 3, 3, 1.93, 1.96, 6.08, 4.27, 4.86, 3, 3, 2.51, 3.97, 2.87, 4, 4, 7.94, 6.64, 4, 4.03, 0.25, 2.64, 8.09, 1.96, 4.64, 5.48, 5.54, 7, 4, 4] 

    var y = d3.scale.linear() 
     .domain([0,d3.max(data.distance)]) 
     .range([0,250]); 

    var chart = d3.select("div") 
     .append("svg") 
      .attr("class","background") 
      .attr("width",10*data.distance.length) 
      .attr("height",350) 
     .append("g") 

     chart.selectAll("rect") 
      .data(data.distance) 
      .enter() 
       .append("rect") 
       .attr("fill", "white") 
       .attr("stroke","black") 
       .attr("width", 10) 
       .attr("height",y) 
       .attr("x",function(d,i){return i *10}); 
</script> 
</body>

來源

2012-06-20 Andy Thornton

如果同時添加y和height然後你就可以計算出從底層做起吧：

.attr("height", 350) 
.attr("y", function(d) { return 350-d; })

來源

2012-06-20 20:24:24 jsalonen

參見本琴：http://jsfiddle.net/xqpGV/2/ – jsalonen

真棒！非常感謝！那讓我瘋狂。我錯過了那個y屬性。猜猜我需要閱讀SVG矩形。 –

沒問題。快樂黑客！ – jsalonen

回答

相關問題