D3：從.tsv格式重構數據源到本地存儲陣列

Question

我有以下D3配置，內容，在數據從外部.tsv文件：

d3.tsv("path/data.tsv", type, function(error, data) { 
    if (error) throw error; 

    x.domain(data.map(function(d) { return d.label; })); 
    y.domain([0, d3.max(data, function(d) { return d.count; })]); 

    svg.append("g") 
     .attr("class", "x axis") 
     .call(xAxis) 
     .text("x-axis label"); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
     .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("y-axis label"); 

    svg.selectAll(".bar") 
     .data(graphData) 
     .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.label); }) 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { return y(d.count); }) 
     .attr("height", function(d) { return height - y(d.count); }); 
}); 

欲而不是從本地加載數據存儲陣列，採取的形式

var graphData = [ 
    {label: '0', count: 0}, 
    {label: '0', count: 0} 
]; 

我有很多麻煩重構這一點。特別是，我不知道如何維護d3.tsv回調中的所有內容。使用.tsv，一切都要等待數據下載，但我只需要這個存儲的變量即可成爲我的數據。我以爲我可以做一個d3.data函數，但顯然不是。我也研究過使用d3.json，但我需要在內部訪問數據，而不是通過拉入單獨的.json文件。

Answer 1

只需刪除d3.tsv()部分並直接使用回撥代碼即可。 您的graphData應取代回調的data參數，但其餘的應保持不變。

var graphData = [ 
    {label: '0', count: 0}, 
    {label: '0', count: 0} 
]; 

x.domain(graphData.map(function(d) { return d.label; })); 
y.domain([0, d3.max(graphData, function(d) { return d.count; })]); 

svg.append("g") 
    .attr("class", "x axis") 
    .call(xAxis) 
    .text("x-axis label"); 

svg.append("g") 
    .attr("class", "y axis") 
    .call(yAxis) 
    .append("text") 
    .attr("transform", "rotate(-90)") 
    .attr("y", 6) 
    .attr("dy", ".71em") 
    .style("text-anchor", "end") 
    .text("y-axis label"); 

svg.selectAll(".bar") 
    .data(graphData) 
    .enter().append("rect") 
    .attr("class", "bar") 
    .attr("x", function(d) { return x(d.label); }) 
    .attr("width", x.rangeBand()) 
    .attr("y", function(d) { return y(d.count); }) 
    .attr("height", function(d) { return height - y(d.count); });