javascript - 如何使用多个相关数据集？

Question

我有几个相关的 json 数据文件。无需透露太多专有数据，并使其简单......

假设一个 json 文件 "businesses"描述企业，其特征包括名称、地址等以及唯一的 ID。这个数字有数十万。

然后是另一个json文件"ratings"持有客户给予的企业评级 1-5，由唯一的客户 ID 和企业 ID 键入。所有评级均对应于 "businesses" 中的企业(我希望)。 "ratings"是一个小得多的文件，事实上我只使用了我拥有的数万个评分中的 1000 个。

我还有一些其他相关文件，但现在我只限于这些。

假设我制作了某种评级的 d3 图表，例如条形图，其中每个垂直条代表一个企业，高度由其平均评级决定。

例如，我希望将鼠标悬停在栏上时可以看到公司名称，为此，我必须从 "businesses" 中提取内容。和"ratings" 。我自始至终只看到过使用一个数据集的示例。

我加载两个数据集并将每个数据集分配给一个变量:

(通常我会进行错误检查，但为了简单起见，我将其删除)

var businesses = [];
var ratings = [];
d3.json("data/business.json", function(json) {
    businesses = json;
    console.log(businesses);
}); 
d3.json("data/rating.json", function(json) {                
    ratings = json;
    console.log(ratings);
});     

两个数据集都出现在控制台中。我制作酒吧，像这样:

var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);
svg.selectAll("rect")
    .data(ratings)
    .enter()
    .append("rect")
    (more attribs for ht, width, fill, etc.)

我可以显示商家 ID:

.append("title").text(function(d) {return "" + d.business_id ;});

但它只是一串无意义的字符、数字、连字符和下划线。

如何最有效地从企业数组中提取与该 ID 匹配的企业名称？

<小时/>

我试过了

.append("title").text(function(d) {return getBizName(d.business_id); });

调用

var getBizName = function(bizId) {
    var i;
    for (i=0; i<businesses.length; i++) {
        if (businesses[i].business_id==bizId) return businesses[i].name;
    }
};

这不起作用。我尝试了几种方法，如果我出现标题，他们会说 undefined 。如果我输入 getBizName(some-valid-business-id)在控制台中，它显示 some-valid-business-id is not defined .

有什么想法吗？请记住，我是新手，所以我犯了很多愚蠢的错误。我也困了。谢谢。

Answer 1

由于我不知道您的 businesses 和 ratings 数组的结构，因此我不确定您的 getBizName 函数出了什么问题，但一般来说，该技术效果很好。

请参阅此处的示例(将鼠标悬停在条形上会显示公司名称):http://jsfiddle.net/n1qnyv9u/

如果 name 位于 businesses 数组中更深处的其他位置，则您可能会错误地访问它。

编辑:由于您说 businesses 通常是一个大型数据集，而 ratings 要小得多，因此您可能需要使用 array.map 提前更新评级以包含name。这样，您就不必每次将评级栏悬停在上方时都调用getBizName。

获取businesses 和 ratings 中的数据后，执行以下操作:

ratings.map(function(a) {
    a.business_name=getBizName(a.bid);
    return a;
  }
);

现在评级包括business_name。构建 title 元素时，只需使用 business_name ，如下所示:

.append("title").text(function(d) { return d.business_name; });

此处更新了 fiddle :http://jsfiddle.net/n1qnyv9u/2/

您可能还想查看https://github.com/Caged/d3-tip以获得更好看的工具提示。