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); });