Fatal编程技术网

Javascript 定义坐标系

javascript charts d3.js

Javascript 定义坐标系,javascript,charts,scale,d3.js,Javascript,Charts,Scale,D3.js,我刚刚开始学习javascript和d3.js。请原谅这个简单的问题，但我已经厌倦了看这个没有用的问题。我确信这是非常明显和简单的，但是为什么这些条线是从上到下而不是从下到上绘制的呢。我曾尝试在域和范围内翻转值，并尝试转换组，但似乎没有任何效果。谢谢 <!DOCTYPE html> <html> <head> <title>Test</title> <script src="http://d3js.org/d3.v2.js"&

我刚刚开始学习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>
如果同时添加y和高度，则可以从底部开始计算杆：

.attr("height", 350)  
.attr("y", function(d) { return 350-d; })
令人惊叹的非常感谢你！这让我快发疯了。我错过了y属性。我想我需要阅读SVG矩形。