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

D3：将.tsv的数据源重构为本地存储的数组

1 个答案: