定义坐标系答案

【问题标题】：Defining the Coordinate System定义坐标系
【发布时间】：2012-06-20 20:17:34
【问题描述】：

我刚刚进入 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>

【问题讨论】：

标签： javascript charts scale d3.js

【解决方案1】：

如果您同时添加y 和height，然后您可以计算从底部开始的条形：

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

【讨论】：

太棒了！非常感谢！那让我发疯了。我错过了那个 y 属性。我想我需要阅读 SVG 矩形。