昨天和今天一直在弄如何把折線倒置
// 模擬資料
var
dataset = [
, ,, ,
, ,, ,
, ];
// 建立x軸的比例尺(線性比例尺)
var
xscale = d3.scale.linear()
.domain(d3.extent(dataset,
function
(d) ))
.range([0, width - padding.left - padding.right]);
// 建立y軸的比例尺(線性比例尺)
var
yscale = d3.scale.linear()
.domain([0, d3.max(dataset,
function
(d) )])
.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軸進行「繫結」
'g')
.attr(
'class'
, 'axis'
).attr(
'transform'
, 'translate(0,'
+ (height - padding.top - padding.bottom) +
')')
.call(xaxis);
// 新增svg元素並與y軸進行「繫結」
'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]);
D3 函式和模組
1.什麼是函式 a.函式是完成一定功能的程式段的封裝，使用者無需理解函式是如何實現，只需了解函式的使用方法 2.什麼是模組 包 庫 a.模組是由多個函式和多個變數，物理上，模組對應py檔案 b.包是多個模組的集合，物理上對應包含多個py檔案的資料夾 c.庫是多個包的集合，物理上對應包含多個包的資料夾...
D3的簡單語法
選擇 選擇單個元素用 select 選擇第乙個元素 選擇多個元素用 selectall 選擇 插入 刪除元素 insert 在選擇集前面插入元素 d3.select body insert p moon remove 刪除元素 d3.select moon remove 文字屬性樣式操作 資料連線 ...
d3與echarts的區別
在我看幾種資料視覺化平台多使用折線圖，面積圖和柱狀圖，條圖居多，對於echarts和d3都有使用。對於使用d3還是echarts還得從使用者需求，計算資料的量的大小來進行分析 1 對於客戶需求要求的圖表擁有大量的使用者互動場景，用 d3比較方便，因為d3中svg畫圖支援事件處理器，他是基於dom進行...