D3.js Visual是Power BI Visuals Gallery中可用的控件，可用於在Power BI Desktop中呈現自定義D3可視化。
需要了解D3編程才能開發自定義可視化。在本技巧中，目的是僅采用D3.js代碼並將其移植到Power BI Desktop來呈現可視化效果。
在此庫中，我們將使用“日/小時熱圖”圖表的代碼，並在Power BI Desktop中創建可視化。
假定開發機器上已經安裝了Power BI Desktop。請按照以下步驟操作。
步驟1
第一步是從 此處下載D3.js可視控件，因為默認情況下Power BI Desktop中不提供該控件 。它可以從第三方供應商處的圖庫中獲得，但免費。下載控制文件時，您還將獲得一個選項來下載示例文件。您可以從此處下載示例 。該文件包含我們將在本文中討論的工作示例代碼。
第2步
下載控制文件后，打開Power BI Desktop。您可以單擊可視化選項卡中的省略號，然后選擇“從文件導入”菜單選項。這將打開一個對話框以選擇可視化包文件，以在Power BI中添加可視化。選擇下載的文件，它應將D3.js視覺效果添加到Power BI Desktop可視化效果庫中。
第三步
打開您將在步驟1中下載的示例Power BI報告文件。在此報告文件中，有三個圖表以及有關如何使用控件的提示。提示選項卡說明了單擊控件右上角的省略號時可用的不同菜單選項。閱讀此信息，以介紹此控件的工作原理。
第四步
現在，單擊“日/小時”可視化，您應該能夠找到如下所示的可視化。在字段部分，您將發現控件中使用了天，小時和值字段。報告文件中有三個演示數據集，該可視化使用的是Demo2數據集。
第5步
在開始研究代碼之前，請考慮從此鏈接瀏覽此D3可視化的實際代碼 。它與D3.js視覺控件中使用的代碼相同，只是稍作改動。現在，我們將嘗試了解將D3.js視覺對象嵌入Power BI Desktop所需的一般修改。
第6步
單擊左側的“數據”選項卡，您將能夠看到視覺效果中使用的數據集的形狀如下左側所示。如果您在步驟5中提供的實際鏈接中分析代碼，則會發現實際代碼還使用了相同形狀的數據集。這顯示在下面的右側–“ data.tsv”，這是實際代碼使用的數據文件。這意味着，當您將任何D3.js代碼移植到Power BI視覺中時，您需要通過選擇相關字段來確保饋給該代碼的數據集的架構保持相同。
步驟7
單擊控件的省略號，您將在控件的右上角找到一個“編輯”按鈕。單擊此按鈕，這將打開代碼編輯器窗口，如下所示。該代碼提到了從何處獲取可視化代碼的鏈接，並在進行了任何更改的地方都帶有注釋。“ pbi”是一個對象，該對象用於D3對象模型中與D3對象一起使用的所有屬性和方法。如果不熟悉D3的人可能不會詳細了解它。對於那些只打算移植代碼的人來說，這是可以的，盡管要依賴D3開發人員才能對可視化進行微調。
步驟8
如果將此代碼與庫中的原始代碼進行比較，則如下所示。通常，應該將腳本標簽中包含的D3代碼移植到Power BI D3控件中。用作D3代碼容器的HTML代碼不應移植，可以忽略。
步驟9
在使用D3對象的任何實例中，都應將其替換為pbi對象。通常，D3對象使用“ tsv”或“ json”文件來獲取數據。在Power BI中，pbi對象將使用“數據”關鍵字來引用將從控件的字段部分提供的數據。
第10步
將上面的步驟與下面的實際代碼摘錄進行比較，您可以從實際的D3代碼中看到Power BI代碼中所做的修改。
步驟11
最后，當D3函數准備好呈現可視化效果時，將對該函數進行調用，您可以在代碼的最后一行下面找到該函數。該部分代碼已被修改，以刪除對靜態數據集的任何引用。
步驟12
如果您按如下所示分析實際D3代碼中的最后一行代碼，並將其與上述代碼中的最后一行進行比較，則可以看到該代碼中所做的修改。
步驟13
這是從網頁移植到Power BI Desktop的D3代碼上需要應用的三個主要更改。總結一下：
- 使用pbi對象而不是D3對象
- 如上所述，刪除靜態數據的引用並進行數據調用
- 確保數據與實際代碼中使用的形狀相同
步驟14
如果刪除可視化文件中的字段之一，您將發現可視化文件正在對數據結構的更改做出反應，如下所示。這意味着可視化效果不是像jpeg / png一樣的靜態圖像，而是一種實時的/交互式的可視化效果，它是根據饋入的數據進行渲染的。
通過這種方式，我們可以通過使用D3.js可視控件在Power BI Desktop中使用D3.js代碼來呈現任何自定義可視化效果。