D3條形圖佔位符

我正在使用D3.js庫。版本3 https://d3js.org/D3條形圖佔位符

我已經使用Json API的數據製作了一個水平條形圖，它很可愛。

問題：我需要在圖形加載之前插入一些文本，例如「No Data to Display」作爲佔位符。

我已經嘗試香草Javascript以及創建一個畫布的佔位符，但都沒有成功。在實施時，圖表將不再加載數據時添加。

我是希望有一個屬性或樣式標籤我可以用於此。

例如：

.attr("placeholder","No Data to Display");

但是我正在尋找新的思路。

請幫助！啊！

來源

2017-07-09 A. Balsinger

當你說*你的意思是*「圖加載之前」 *「的JSON文件之前下載並解析」 *？ –

@GerardoFurtado是的 –

根據評論，似乎你有一個很大的JSON來下載和解析，並在此期間，你想向用戶顯示沒有數據要顯示（還）。

您可以使用請求中的"progress"事件偵聽器（d3.json函數）執行此操作。在這種情況下，像這樣：

d3.json("foo.json") 
    .on("progress", function(){ 
     //show user that the data is downloading 
    }) 
    .get(callback);

這裏是一個演示，我從data.gov下載一個巨大的JSON。在下載JSON的同時，屏幕上會顯示「正在下載文件...」消息，當文件被下載時，該消息將更改爲「文件已下載成功」。檢查它：

var svg = d3.select("svg"); 
 
var text = svg.append("text") 
 
    .attr("x", 50) 
 
    .attr("y", 50) 
 
    .style("font-size", "20px"); 
 

 
d3.json("https://data.cityofnewyork.us/api/views/5b3a-rs48/rows.json") 
 
    .on("progress", function(evt) { 
 
    text.text("Downloading file...") 
 
    }) 
 
    .get(function(error, data) { 
 
    text.text("File downloaded successfully") 
 
    })

<script src="https://d3js.org/d3.v3.min.js"></script> 
 
<svg></svg>

來源

2017-07-10 14:24:50

好吧 - 我想要得到更具體的;如果json文件是空的呢？像.on（「empty」，function（evt）{text.text（「No data is on file ..」）這是可能的嗎？ –

你是什麼意思？ –

例如 - 我們正在下載這個json文件對於圖形，但它是空的，我們需要一個顯示消息 –

D3條形圖佔位符

回答

相關問題