使用:
效果: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,可以看出來其...