1. 程式人生 > >運用d3和d3_top實現折現的方法

運用d3和d3_top實現折現的方法

昨天和今天一直在弄如何把折線倒置 // 模擬資料 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]);
原作的連結: http://www.jb51.net/article/93088.htm