昨天和今天一直在弄如何把折線倒置
// 模擬數據
var dataset = [
{x: 0, y: 11}, {x: 1, y: 35},
{x: 2, y: 23}, {x: 3, y: 78},
{x: 4, y: 55}, {x: 5, y: 18},
{x: 6, y: 98}, {x: 7, y: 100},
{x: 8, y: 22}, {x: 9, y: 65}
];
// 創建x軸的比例尺(線性比例尺)
var xScale = d3.scale.linear()
.domain(d3.extent(dataset, function(d) {
return d.x;
}))
.range([0, width - padding.left - padding.right]);
// 創建y軸的比例尺(線性比例尺)
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset,function(d) {
return d.y;
})])
.range([height - padding.top - padding.bottom, 0]);
// 創建x軸
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom');
// 創建y軸
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left');
// 添加SVG元素並與x軸進行“綁定”
main.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(0,' + (height - padding.top - padding.bottom) + ')')
.call(xAxis);
// 添加SVG元素並與y軸進行“綁定”
main.append('g')
.attr('class', 'axis')
.call(yAxis);
這次我們模擬了一些點的數據來進行折線的繪製。d3.scale.linear()創建了線性比例尺，linear.domain()定義定義域，linear.range()定義值域。這裏需要注意一下，因爲SVG畫布的y軸與傳統認知上的y軸的方向是反着來的，所以在定義y軸的定義域和值域對應關係時，也需要反着來。d3.extent可以得到參數數組中的最大值和最小值，並以數組的形式返回。然後用d3.svg.axis()創建了兩個座標軸，把比例尺應用到它們上面，並且用axis.orient()設置了座標軸的刻度尺的方向。最後，添加SVG元素，用call()把定義好的座標軸與SVG元素聯繫起來。通過設置它們的transform屬性來移動元素，使它們看起來像是一個座標系。
說白了就是把y軸的.range([])裏面兩個數組元素調換方向就可以了。
// Horizontal 創建x軸的比例尺(線性比例尺)
var x = d3.time.scale()
.range([padding, width - padding]);
// Vertical 創建y軸的比例尺(線性比例尺) 把height，5對掉，那麼折線就會向下走
var y = d3.scale.linear()
.range([height, 5]);