javascript - d3.js 鼠标悬停在使用两个不同的 json 文件显示有关节点的详细信息

Question

就我而言，我想在 d3.js 中构建一个鼠标事件来实现每个节点的详细信息。但我必须使用不同的两个 json 文件来实现这一点。

基于 Simple d3.js tooltip 的示例。我在以下部分中编写了自己的代码:

d3.json("https://quarkbackend.com/getfile/otto-gao24/places-json", function(error,cities) {

var lineFunction = d3.svg.line()
    .x(function(d) {return d[0];})
    .y(function(d) {return d[1];})
    .interpolate("linear");
    // append some cities:
    g2.selectAll(".cities")
      .data(d3.entries(cities))
      .enter()
      .append("circle")
      .attr("transform",function(d) { return "translate("+ projection(d.value) + ')'; })
      .attr("r",1.5)
      .attr("fill","white")
      .attr("stroke","steelblue")

这部分显示了 map 中的位置节点，我导入了第一个 json 文件来构建节点。但目前还没有详细信息。然后我必须在每个节点中添加鼠标悬停事件。比如

.attr("fill","white")
.attr("stroke","steelblue")
.on("mouseover", function(d) {
    div.transition()
        .duration(200)
        .style("opacity", .9);
    div .html(function (d){
      d3.json("{% url 'places_information:json' %}", function(data) {
        return data.networks.name;
      });
    })
        .style("left", (d3.event.pageX) + "px")
        .style("top", (d3.event.pageY - 28) + "px");
  })
.on("mouseout", function(d) {
    div.transition()
         .duration(500)
         .style("opacity", 0);
  });

第二部分显示我导入了下一个 json 文件以显示有关节点的详细信息。但在我的结果中，显示 nothing 。我认为问题出在导入的文件中。

第一个 json 文件用于将我的城市放置在 map 中，如下所示:

{
"TYO": [139.76, 35.68],
"BKK": [100.48, 13.75],
"BER": [13.40, 52.52],
"NYC": [-74.00, 40.71],
"SIN": [103.75, 1.36],
"BSB": [-47.43, -15.67]
}

第二个 json 文件显示了我的城市的 ID、名称和其他属性。如下:

id: "dfc69b95-915f-475c-8800-db6c4e15c290"
name: "TYO"
original_status: "ACTIVE"
....

我的意思是，当我将鼠标悬停在城市节点上时，将显示第二个 json 文件的信息。

您能否告诉我如何在一个已存在的 json 文件中导入另一个 json 文件，以及如何使用鼠标事件显示详细信息？

衷心感谢。

Answer 1

d3.json 是异步。这意味着您不能将其放入 mouseover 事件中。

取而代之的是，在绘制数据可视化之前加载所有文件(2个、3个或更多，无关紧要)的数据。您可以使用 d3.queue ，或者以更简单的方法嵌套 d3.json 函数:

d3.json("data1.json", function(data1) {
    d3.json("data2.json", function(data2) {

        //code using both data files here

    })
})

这里有一个 plunker 展示它。查看数据文件。在 plunker 中，将鼠标悬停在圆圈上并查看控制台:https://plnkr.co/edit/MvIqHtCBSjI1574XyV9V?p=preview

基本上，在 mouseover 函数内部，根据 data1.json 中的信息检索 data2.json 文件中的信息文件，用于创建圆圈。

遵循相同的方法，相应地更改您的代码。