D3.js鼠标通过使用两个不同的JSON文件显示有关节点的详细信息

Question

在我的情况下，我想在D3.js中构建鼠标事件以实现每个节点的详细信息。但是我必须使用不同的两个JSON文件来实现这一目标。

基于简单D3.js工具提示的示例。我在以下一部分中做了自己的代码：

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")

本部分显示了地图中的位置节点，我导入了第一个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文件以显示有关节点的详细信息。但是以我的结果，什么也没有显示。我认为问题在导入文件中。

第一个JSON文件用于将我的城市放在地图中，如下所示：

{
"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-file的信息将显示我在城市节点上的鼠标时。

您能告诉我如何在一个存在的JSON文件中导入其他JSON文件，我该如何使用鼠标事件显示详细信息？

感谢

Answer 1

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

代替了

在绘制dataviz之前，加载所有文件(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函数中，data2.json文件中的信息是根据data1.json文件中的信息检索的，用于创建圆圈。

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