就我而言,我想在 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 文件,以及如何使用鼠标事件显示详细信息?
衷心感谢。
最佳答案
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
文件中的信息文件,用于创建圆圈。
遵循相同的方法,相应地更改您的代码。
关于javascript - d3.js 鼠标悬停在使用两个不同的 json 文件显示有关节点的详细信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44777441/