使用 dscc-gen 快速編寫視覺化內容

如要在社群視覺呈現中查看變更，一般工作流程是將檔案上傳至 GCS，然後重新整理數據分析報表。這樣做雖然可行，但您可能需要花費大量時間等待變更生效。dscc-gen 可讓您立即查看資料視覺呈現程式碼變更，縮短撰寫社群視覺呈現的時間。

如要開始使用，請確認已安裝 npm 5.2.0 以上版本和 gsutil。然後執行下列指令：

npx @google/dscc-gen viz

注意： 如果偏好使用 yarn，請傳遞 --yarn 做為引數。

首次設定

dscc-gen 隨附預設的本機資料集，可能無法代表您想顯示的資料。如要更新這個資料集以符合需求，請按照下列步驟操作：

1. 在 src/index.json 更新設定。
2. 執行 npm run update_message。 這會將視覺化內容部署到 dev 值區，以方便複製的格式顯示訊息。
3. 建立新報表，並連結至可代表要以視覺化方式呈現資料的資料集。
4. 使用 dev 值區做為元件 ID，新增社群視覺呈現。
5. 將視覺化內容複製到 scripts/data/localData.js。您在本機開發時會用到這項資料。

指令碼

下列指令碼適用於使用 dscc-gen 建立的視覺化專案。

指令	動作
npm run start	啟動本機伺服器並預覽視覺化效果
npm run update_message	使用 objectFormat 更新訊息
npm run build:dev	將 ./src 中的建構檔案移至 ./build，並停用快取。
npm run push:dev	將檔案從 build 複製到 dev bucket。
npm run build:prod	從 ./src 建構檔案到 ./build，並啟用快取。
npm run push:prod	將檔案從 build 複製到 prod bucket。

注意： 在建構及部署資料檢視之前，請務必將 const LOCAL= 變更為 src/index.js 中的 false。

update_message 指令預設為 objectFormat。如要使用 tableFormat，請在 package.json 中將 update_message 指令碼的參數從 -f object 編輯為 -f table。

程式碼實驗室

如要瞭解如何使用這項工具，請參閱 dscc-gen 程式碼研究室。