前端 d3js 整合基礎方法

2021-09-25 16:00:48 字數 2311 閱讀 4778

使用:

hd3.init("#graph",,,

mouseout: function ()

});

效果:

**:

//"#"元素 :"#graph"

//資料和其欄位json :

//互動 方法:

/*, mouseout: function ()

}*/var hd3 = ( hd3 || function () ,

options =

};function init(element,json,onjson) );

//畫布

let svg = d3.select(element)

.attr("height", options.height)

.attr("width", options.width)

.style("background", "#fff");

//定義乙個裝圖表的分組並且確定他的位置

.attr("transform","translate(" + options.padding.top + "," + options.padding.left + ")")

.attr("background", "skyblue");

//scaleband()序數比例尺 scalelinear()線性比例尺 .domain()輸入域 range() 輸出域

let xscale = d3.scaleband()

.domain(xlist)

.rangeround([0, options.width - options.padding.left - options.padding.right],0,0);

//y軸輸入域 [0,400] 輸出域 [500-20-20,0]

let yscale = d3.scalelinear()

.domain([0,d3.max(data)])

.range([options.height - options.padding.top - options.padding.bottom,0]);

//座標軸

// .axisbottom(canshu) 建立向下的座標軸 引數是比例尺 axisleft向左的座標軸

let xaxis = d3.axisbottom(xscale);

let yaxis = d3.axisleft(yscale);

//到這一步 柱狀圖的基本架子已經搭起來了,下面需要做的便是怎麼把資料呈現了

//將座標軸元件加入當前圖表分組

.attr("transform","translate(" + 0 + ","+(options.height - options.padding.top - options.padding.bottom)+")")

.call(xaxis);

.attr("transform","translate(0,0)")

.call(yaxis);

//載入資料

let g_s = g.selectall(".rect")

.data(data)

.enter()

//矩形

.attr("x",function (d,i) )

.attr("y",function (d) )

.attr("width",function () )

.attr("height",function (d) )

.attr("fill","skyblue")

//動態效果

.transition()//新增過度

.duration(1000)//持續時間

// .delay(function (d,i) )

.attr("y",function(d))

.attr("height",function(d));

//互動動作

$.each(onjson, function (i,v) );

//最後 給每個矩形加上文字

.attr("x", function (d, i) )

.attr("y", function (d) )

.attr("dx", function () )

.attr("dy", 20)

.text(function (d) );

}ret.init = init;

return ret;

}());

d3js的初接觸

昨天,專案經理突然給我說甲方那邊想做個雲圖,叫我上網上找找方法。作為標準的程式猿宅男表示,雲圖是什麼鬼?於是就開始和度娘的親密接觸,發現有一種框架可以實現這種功能,那就是d3.js。這是我第二次聽說這個框架了,上一次聽說還是面試的時候那面試官考我的問題,接下來就開始尋找d3js教程開始苦苦的學習之旅...

D3 js讀取外部json資料

分享一下我老師大神的人工智慧教程。零基礎!通俗易懂!風趣幽默!還帶黃段子!希望你也加入到我們人工智慧的隊伍中來!d3.js是乙個很好的資料視覺化工具,支援從web服務讀取json資料,或者從外部檔案如.json,csv檔案中直接讀取。由於部分服務比如flickrs上的 資料服務需要vpn才能訪問,為...

D3js中each與call使用區別

在對選集中的物件進行操作的時候,each和call都可以使用,通過如下 具體分析他們使用的區別 1 code中使用的each,可以看出來他的作用是對選集中的物件進行遍歷操作,其中引數d為undefined,引數i為遍歷元素的下標,this表示當前操作的物件 2 code中使用的call,可以看出來其...