簡(jiǎn)介

SandDance 是微軟開源的數(shù)據(jù)可視化工具，可以直觀地探索、理解和呈現(xiàn)數(shù)據(jù)。通過使用易于理解的視圖，可以幫助用戶更快速、更方便地觀察數(shù)據(jù)的特點(diǎn)，展示支持事實(shí)故事的證據(jù)，列舉對(duì)假設(shè)、猜想的支持，更好地去構(gòu)建數(shù)據(jù)模型。

SandDance 提供了一種找到與數(shù)據(jù)交互的有效方法，幫助我們了解可視化數(shù)據(jù)的細(xì)微差別，指導(dǎo)我們?nèi)绾螐亩鄠€(gè)角度檢查數(shù)據(jù)，如何對(duì)數(shù)據(jù)采取怎樣的分析處理。

微軟提供了在線的demo，可以嘗試一下：

https://microsoft.github.io/SandDance/app/

項(xiàng)目地址是：

https://github.com/Microsoft/sanddance

SandDance開發(fā)

SandDance 是一個(gè)組件堆棧，其圖層層次結(jié)構(gòu)如下：

Deck.gl：WebGL渲染和畫布控件。

Vega：圖表布局。

sanddance：?jiǎn)卧梢暬瘓D表視圖以及選擇/過濾交互。

sanddance-test-umd：在UMD部署中測(cè)試sanddance。

sanddance-test-es6：在ES6部署中測(cè)試sanddance。

sanddance-react（可選）：React包裝器，用于sanddance。

sanddance-vue（可選）：Vue包裝器，用于sanddance。

sanddance-explorer：基于React的數(shù)據(jù)探索組件。

sanddance-app：網(wǎng)站上使用的基于React的示例應(yīng)用程序。

安裝

Clone倉(cāng)庫(kù)源碼

執(zhí)行命令npm install

安裝Jekyll用于本地運(yùn)行

構(gòu)建

執(zhí)行命令npm run build

運(yùn)行。執(zhí)行以下命令

1. npm run deploy

2. cd docs

3. jekyll serve

運(yùn)行后訪問以下地址：

http://127.0.0.1:4000/SandDance/

http://127.0.0.1:4000/SandDance/tests

sanddance-vue

簡(jiǎn)單介紹一下 sanddance-vue 組件的使用方法。

添加依賴，將以下內(nèi)容添加的工程的package.json文件中，然后運(yùn)行命令npm install：

“@deck.gl/core”： “^8.3.7”，

“@deck.gl/layers”： “^8.3.7”，

“@msrvida/sanddance-vue”： “^3”，

“@luma.gl/core”： “^8.3.1”，

“vega”： “^5.17.0”

示例代碼：

《template》

《div id=“app”》

《SandDanceVue v-bind:data=“data” v-bind:insight=“insight” /》

《/div》

《/template》

《script》

import * as deck from “@deck.gl/core”;

import * as layers from “@deck.gl/layers”;

import * as luma from “@luma.gl/core”;

import * as vega from “vega”;

import SandDanceVue， { SandDance } from “@msrvida/sanddance-vue”;

SandDance.use（vega， deck， layers， luma）;

const data = ［{ a： 1 }， { a： 2 }， { a： 3 }］;

const insight = {

chart： “barchartV”，

columns： {

x： “a”，

z： “a”

}，

size： {

height： 500，

width： 500

}，

view： “3d”

};

export default {

name： “App”，

components： {

SandDanceVue

}，

data： （） =》 {

return {

data，

insight

};

}

};

《/script》

《style》

.sanddance-VueViewer {

height： 700px;

border： 1px solid black;

}

《/style》

《style src=“@msrvida/sanddance/dist/css/sanddance.css” /》

SandDance 相應(yīng)的插件：

編輯：jq