js實現模板可視化編輯器

A. 初識 D3.js ：打造專屬可視化

隨著現在自定義可視化的需求日益增長，Highcharts、echarts等高度封裝的可視化框架已經無法滿足用戶各種強定製性的可視化需求了，這個時候D3的無限定製的能力就脫穎而出。

如果想要通過D3完成可視化，除了對於D3本身API的學習, 關於web標準的HTML, SVG, CSS, javascript 和 數據可視化的概念以及標准都是需要學習的。這無疑帶來了較高的學習門檻，但這也是值得的，因為掌握 D3 後，我們幾乎可以實現任何 2d 的可視化需求。

本文通過對D3核心模塊分析以及進行具體案例實踐的方式，來幫助初學者學習了解D3的繪圖思路。

D3的全稱是 Data-Driven Documents（數據驅動文檔），是基於數據來操作文檔的 JavaScript 庫，其核心在於使用繪圖指令對數據進行轉換，在源數據的基礎上創建新的可繪制數據， 生成SVG路徑以及通過數據和方法在DOM中創建數據可視化元素（如軸）。

相對於Echats等開箱即用的可視化框架來說，D3更接近底層，它可以直接控制原生的SVG元素，並且不直接提供任何一種現成的可視化圖表，所有的圖表都需我們在它的庫里挑選合適的方法構建而成，這也大大提高了它的可視化定製能力。而且D3 沒有引入新的圖形元素，它遵循了web標准（HTML, CSS, SVG 以及 Canvas ）來展示數據 ，所以它可以不需要依賴其他框架獨立運行在現代瀏覽器中。

在V4版本後，D3的 API 現在已經被拆分成一個個模塊，我們可以根據自己的可視化需求進行按需載入。根據泛義可以將D3 API模塊分為以下的幾大類： DOM操作、數據處理，數據分析轉換、地理路徑，行為等 。

這里我們主要對 D3-selection 和 D3-scale 模塊進行解析：

D3-selection （選擇集） 是 D3js的核心模塊，主要是用來進行選擇元素，設置屬性、數據綁定，事件綁定等操作。

選擇元素： D3-selection 提供了兩種方法來獲取目標元素，d3.select()：返回目標元素的第一個節點，d3.selectAll()：返回目標元素的集合，乍一看有點類似原生API 的 querySelector 和 querySelectorAll，但是 d3.select 返回的是一個 selection 對象，querySelector 返回的是一個 NodeList 數組。通過控制台列印的信息，可以看到 selection 下的 groups 存放了所有選擇的元素集合，parents 存放了所有選中元素的父節點。

設置屬性或者綁定事件： 我們不需要關心 groups 的結構是怎麼樣的。當調用 selection.attr 或者 selection.style 的時候, selection 中的所有 group 的所有子元素都會被調用，group 存在的唯一影響是: 當我們傳參是一個function 的時候，例如 selection.attr('attrName', function(data, i)) 或 selection.on('click', function(data, i)) 時， 傳遞的 function(data, i) 中, 第二個參數 i 是元素在 group 中的索引而不是在整個 selection 中的索引。

數據綁定： 實際上是給選擇的DOM元素的 __data__ 屬性賦值，這里提供了3種方式進行數據綁定：

（1）給每一個單獨的 DOM 元素調用 selection.datum：d3.select('body').datum(20) 等價於 document.body.__data__ = 20

（2）從父節點中繼承來數據, 比如: append , insert , select，子節點會主動繼承父節點的數據：

（3） 調用 selection.data() 方法，支持傳入裝有基礎數據類型的數據，也支持傳入一個function(parentNode, groupIndex)根據節點索引與數據做映射，data()方法引入了 d3 中非常重要的 join 思想:

綁定 data 到 DOM 元素， 在D3中是通過比較 data 和 DOM 的 key 值來找到對應關系的。 如果我們沒有單獨設置 key 值，那麼默認根據 data 的下標索引來設定，但是當數據順序發生改變，這個默認下標 key 值 就變得不可靠了，這時我們可以使用 selection.data(data, keyFunction) 中的第二個參數 keyFunction，根據當前的數據返回一個對應的 key 值。通過下面的圖例可以看出，不管是有一個還是多個 group（每個group 都是獨立的），只要我們保證在任意一個 group 中的 key 值是唯一的，數據一旦發生變化都會反映給對應的 DOM 元素（ update 的過程）：

上面提到的都是data數據和DOM元素數量相同的情況下的數據綁定，那如果data數據和DOM元素數量不相同時，我們來看看 D3 又是如何進行數據綁定的：現在終於可以來介紹 D3-selecion 模塊的核心 Join 思想了，這個思想簡單來說就是 「不應該告訴D3去怎麼創建元素, 而是告訴D3，.selectAll() 得到的 selecion 集合應該和 .data(data) 綁定的數據要怎麼一一對應」。

從上圖可以看出，在進行 d3.data(data) 數據綁定的時候，會產生三種狀態的選擇集：

用 Join 的方式來理解意味著，我們要做的事情僅僅是聲明 DOM集合和數據集合之間的關系, 並且通過處理三個不同狀態的集合 enter、update 、 exit 來描述這種關系。這種方式可以大大簡化我們對DOM元素的操作，我們不需要再用 if 和 for 循環的方式來進行復雜的邏輯判斷，來得到我們需要得到的元素集合。並且在處理動態數據的時候，可以通過處理這三種狀態，輕松的展示實時數據和添加平滑的動態交互效果。

D3-scale （比列尺） 提供多種不同類型的比例尺。經常和 D3-axis 坐標軸模塊一起使用。

D3-scale 提供了多種連續性和非連續性的比例尺，總體可以將他們分為三大類：

常用的一些比例尺：

（1）d3-scaleLinear 線性比例尺(連續性輸入和連續性輸出)

可以看出，調用d3.scaleLinear()可以生成線性比例尺，domain()是輸入域，range()是輸出域，相當於將domain中的數據集映射到range的數據集中。

使用示例：

映射關系：

（2）d3-scaleTime 時間比例尺(連續性輸入和連續性輸出)

時間比例尺與線性比例尺類似，只不過輸入域變成了一個時間軸。正常我們使用比例尺都是個正序的過程，但是D3也提供了invert()以及invertExtent()方法，我們可以通過輸出域中的具體值得出對應輸入域的值。

使用示例：

（3）d3.scaleQuantize 量化比例尺(連續性輸入和離散性輸出)

量化比例尺是將連續的輸入域根據輸出域被分割為均勻的片段，所以它的輸出域是離散的。

使用示例：

映射關系：

（4）d3. scaleThreshold 閾值比例尺(連續性輸入和離散性輸出)

閾值比例尺可以為一組連續數據指定分割閾值，閾值比例尺默認的 domain：[0.5] 以及默認的 range：[0, 1] ，因此默認的 d3.scaleThreshold() 等價於 Math.round 函數。 閾值比例尺輸入域為 N 的話，輸出域必須為 N + 1，否則比例尺對某些值可能會返回 undefined，或者輸出域多餘的值會被忽略。

使用示例：

存在三種映射關系：

a. 當domain和range的數據是 N : N+1

b. 當domain和range的數據是 N : N + 大於1

c. 當domain和range的數據是 N + 大於0 : N

（5）d3.scaleOrdinal 序數比例尺(離散性輸入和離散性輸出)

與scaleLinear等連續性比例尺不同，序數比例尺的輸出域和輸入域都是離散的。

使用示例：

存在三種映射關系：

a.當domain和range的數據是一一對應

b.當domain少於range的數據

c.當domain多於range的數據

通過以上的學習，應該對d3是如何操作DOM以及坐標軸的數據映射為相應的可視化表現有了一定的了解，下面我們來實際運用這兩個模塊，來實現我們常見的可視化圖表：柱狀圖。

（1）首先添加一個SVG元素。

（2）根據我們上面說到 d3.scale 模塊以及 d3.axis 模塊繪制坐標軸，d3.scaleBand() 叫做序數分段比例尺，類似我們說的 d3.scaleOrdinal() 序數比例尺，但是它支持連續的數值類型的輸出域，離散的輸入域可以將連續的范圍劃分為均勻的分段。這里再講一個細節，在繪制網格的時候，我們並沒有額外添加 line 元素來實現，而是通過 d3.axis 坐標軸模塊的 axis.ticks() 方法對坐標軸刻度進行了設置，通過 tickSIze() 設置了刻度線長度，來模擬和圖表寬度相等的網格線，並且還可以通過 tickFormat() 對Y軸刻度值進行格式化轉換。

（3）坐標軸繪制好了後，我們通過數據綁定來繪制與之對應的矩形(rect)元素了。

（4）這個時候柱狀圖已經基本繪制好了，我們再豐富內容展示，添加標簽、標題等提示信息。

（5）最後我們通過給柱子綁定監聽事件，實現tooltips的信息浮層交互。

通過對 d3.selection 、d3.scale 以及 d3.axis等模塊的學習，我們已經可以繪制出常用的柱狀圖等圖表，我們也可以通過d3提供的其他模塊繪制出更加復雜的可視化效果，例如通過 d3-hierarchy(層級模塊) 實現層級樹圖可視化，d3-geo(地理投影) 實現地圖數據可視化等，本文講解的內容還只是D3庫的冰山一角。所以等我們掌握了D3後，限制我們實現可視化的不再是技術而是想像力。

B. javascript實現可編輯樣式的文本

你要的是所見即所得HTML編輯器，簡單來說需要幾個基本步驟：

1，需要一個可以編輯同時又可顯效果的編輯框。textarea不行，它只能用來輸入純文本，不能顯示顏色、斜體之類的文字樣式，就像記事本。
你可以使用iframe來實現，修改iframe的designMode屬性使其可以被編輯。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<script>myEditer.document.designMode = 'on';</script>

這樣你就可以在這個iframe區域里寫字了。

2，選中要添加樣式的文字。通常我們用WORD編輯一段文字的樣式時，一般是先打字，再編輯樣式。所以你需要一個選中要處理文本的方法。JS的selection.createRange()可以選中文本，返回一個對象，你可以通過訪問該對象的text屬性得到被選中的文本。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
alert(sel.text);
}
</script>

3，改變被選中文本的樣式。selection.createRange()選中文本，返回一個對象，該對象有一個方法execCommand()，可以用來改變被選中文本的樣式。

<iframe id="myEditer" width="100%" height="150px"></iframe>
<input type="button" value="加粗" onclick="Bold()">
<script>
myEditer.document.designMode = 'on';
function Bold(){
var sel = myEditer.document.selection.createRange();
//alert(sel.text);
sel.execCommand("Bold")
}
</script>

execCommand()的常用用法：
字體--宋體、黑體、楷體等
execCommand("fontname","",字體)
字型大小--字型大小大小
execCommand("fontsize","",字型大小)
加重
execCommand("Bold")
斜體
execCommand("Italic")
下劃線
execCommand("Underline")
刪除線
execCommand("StrikeThrough")
居左
execCommand("JustifyLeft")
居右
execCommand("JustifyRight")
居中
execCommand("JustifyCenter")
剪切
execCommand("Cut")
拷貝
execCommand("Copy")
粘貼
execCommand("Paste")
取消操作--IE5.0以後可以無限取消
execCommand("Undo")
重復操作
execCommand("Redo")

把上面的每個用法用按鈕來實現，你就已經完成了一個簡單的可視文本編輯器。

C. 數據分析可視化工具推薦

MicroStrategy Desktop

MicroStrategy Desktop 是一款功能強大的數據發現工具，可讓用戶自行探索、分析數據。用戶使用 MicroStrategy Desktop 來創建自定義的互動式達析報告，用於探索其業務數據。可從許多不同的來源導入業務數據，包括本地文件、資料庫、Google Drive、Facebook 等。

MicroStrategy Desktop 提供一套完整的分析功能，其綜合能力優於其他各種數據發現工具。並且永久免費。

MicroStrategy Desktop 有 Windows 和 Mac 版本，本文中我們用的是windows 版本。

第一步：添加數據

打開軟體最顯眼的左上角藍色按鈕提示用戶需要建「新達析報告」。

最後，保存你的達析報告就行了!

好了，數據分析就完成了，是不是很簡單吶！

下載地址：https://www.microstrategy.cn/cn/get-started/desktop

體驗感受：

1. MicroStrategy Desktop 提供一套完整的分析功能，其綜合能力優於其他各種數據發現工具。即適合無IT背景的小白用戶通過圖形操作來分析數據，也提供腳本化方式讓高端用戶更方便地進行大規模的流程管理。

2. MicroStrategy Desktop 可連接至200 多個數據源。憑借開箱即用數據連接和本機驅動，MicroStrategy 可以輕松地無縫連接到任何企業資源，包括資料庫、移動化設備管理 (MDM) 系統、企業目錄、雲應用、物理訪問控制系統，以及諸如 Tableau、Power BI 和 Qlik 等其他自助服務工具。

3. 永久免費！！！

4. 安裝包比較大，有1.1G，下載安裝包需要一定時間。

D. 如何使用d3.js製作可視化圖表

D3是目前最流行的JavaScript可視化圖表庫之一，D3的圖表類型非常豐富，並且支持SVG格式，因此應用十分廣泛，也有很多圖表插件基於D3開發，比如MetricsGraphics.js，在D3上構建的數據圖表非常強大。

D3的特點

允許綁定任意數據到DOM，將數據驅動轉換應用到Document中。

不僅可以創建精美的HTML表格，而且可以繪制折線圖、柱形圖和餅圖等數據圖表。

支持SVG，在Web頁面上渲染毫無壓力。

回到頂部

D3的使用方法

關於D3的具體用法，可以看D3圖形庫API參考這篇文章。本文主要對介紹一些經典圖表的實現效果及代碼。

<!DOCTYPEhtml>
<metacharset="utf-8">
<style>

svg{
font:10pxsans-serif;
}

.y.axispath{
display:none;
}

.y.axisline{
stroke:#fff;
stroke-opacity:.2;
shape-rendering:crispEdges;
}

.y.axis.zeroline{
stroke:#000;
stroke-opacity:1;
}

.title{
font:30078pxHelveticaNeue;
fill:#666;
}

.birthyear,
.age{
text-anchor:middle;
}

.birthyear{
fill:#fff;
}

rect{
fill-opacity:.6;
fill:#e377c2;
}

rect:first-child{
fill:#1f77b4;
}

</style>
<body>
<scriptsrc="http://d3js.org/d3.v3.min.js"></script>
<script>

varmargin={top:20,right:40,bottom:30,left:20},
width=960-margin.left-margin.right,
height=500-margin.top-margin.bottom,
barWidth=Math.floor(width/19)-1;

varx=d3.scale.linear()
.range([barWidth/2,width-barWidth/2]);

vary=d3.scale.linear()
.range([height,0]);

varyAxis=d3.svg.axis()
.scale(y)
.orient("right")
.tickSize(-width)
.tickFormat(function(d){returnMath.round(d/1e6)+"M";});

//AnSVGelementwithabottom-rightorigin.
varsvg=d3.select("body").append("svg")
.attr("width",width+margin.left+margin.right)
.attr("height",height+margin.top+margin.bottom)
.append("g")
.attr("transform","translate("+margin.left+","+margin.top+")");

//.
varbirthyears=svg.append("g")
.attr("class","birthyears");

//Alabelforthecurrentyear.
vartitle=svg.append("text")
.attr("class","title")
.attr("dy",".71em")
.text(2000);

d3.csv("population.csv",function(error,data){

//Convertstringstonumbers.
data.forEach(function(d){
d.people=+d.people;
d.year=+d.year;
d.age=+d.age;
});

//.
varage1=d3.max(data,function(d){returnd.age;}),
year0=d3.min(data,function(d){returnd.year;}),
year1=d3.max(data,function(d){returnd.year;}),
year=year1;

//Updatethescaledomains.
x.domain([year1-age1,year1]);
y.domain([0,d3.max(data,function(d){returnd.people;})]);

//[male,female].
data=d3.nest()
.key(function(d){returnd.year;})
.key(function(d){returnd.year-d.age;})
.rollup(function(v){returnv.map(function(d){returnd.people;});})
.map(data);

//.
svg.append("g")
.attr("class","yaxis")
.attr("transform","translate("+width+",0)")
.call(yAxis)
.selectAll("g")
.filter(function(value){return!value;})
.classed("zero",true);

//(sothatnoenterorexitisrequired).
varbirthyear=birthyears.selectAll(".birthyear")
.data(d3.range(year0-age1,year1+1,5))
.enter().append("g")
.attr("class","birthyear")
.attr("transform",function(birthyear){return"translate("+x(birthyear)+",0)";});

birthyear.selectAll("rect")
.data(function(birthyear){returndata[year][birthyear]||[0,0];})
.enter().append("rect")
.attr("x",-barWidth/2)
.attr("width",barWidth)
.attr("y",y)
.attr("height",function(value){returnheight-y(value);});

//Addlabelstoshowbirthyear.
birthyear.append("text")
.attr("y",height-4)
.text(function(birthyear){returnbirthyear;});

//Addlabelstoshowage(separate;notanimated).
svg.selectAll(".age")
.data(d3.range(0,age1+1,5))
.enter().append("text")
.attr("class","age")
.attr("x",function(age){returnx(year-age);})
.attr("y",height+4)
.attr("dy",".71em")
.text(function(age){returnage;});

//.
window.focus();
d3.select(window).on("keydown",function(){
switch(d3.event.keyCode){
case37:year=Math.max(year0,year-10);break;
case39:year=Math.min(year1,year+10);break;
}
update();
});

functionupdate(){
if(!(yearindata))return;
title.text(year);

birthyears.transition()
.ration(750)
.attr("transform","translate("+(x(year1)-x(year))+",0)");

birthyear.selectAll("rect")
.data(function(birthyear){returndata[year][birthyear]||[0,0];})
.transition()
.ration(750)
.attr("y",y)
.attr("height",function(value){returnheight-y(value);});
}
});

E. 掌握js能快速開發可視化應用嗎

答案是肯定的，

在開始使用 ThingJS 之前，需要先了解JavaScript，我們假設您已經掌握JS。

創建項目

創建項目之前需登錄ThingJS賬號，如果您尚未登錄賬號或頁面出現「登錄已過期，請重新登錄！」的提示，為保證項目的正確保存及運行，請您在賬號登錄之後再創建項目。您可通過以下三種方式創建項目：

• 選擇菜單區域的「文件 - 新建項目」選項

• 點擊工具欄「新建」圖標，圖標如右圖所示：