運用d3和d3_top實現折現的方法
阿新 • • 發佈:2018-11-29
昨天和今天一直在弄如何把折線倒置
// 模擬資料
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
說白了就是把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