D3地图工具提示
D3 map tooltips
我正在试验D3世界地图,并使用此示例构建:http://techslides.com/demos/d3/worldmap-template.html
现在,我想为地图上绘制的城市实现一个类似于国家的工具提示(即高亮显示和显示名称(。
到目前为止,我已经粘贴并稍微修改了国家/地区工具提示的代码,并试图从csv将其连接到城市日期。这是代码的后面部分,带有原始注释和我的副本粘贴:
//function to add points and text to the map (used in plotting capitals)
function addpoint(lat,lon,text) {
var gpoint = g.append("g").attr("class", "gpoint");
var x = projection([lat,lon])[0];
var y = projection([lat,lon])[1];
gpoint.append("svg:circle")
.attr("cx", x)
.attr("cy", y)
.attr("class","point")
.attr("r", 1.5);
//conditional in case a point has no associated text
if(text.length>0){
gpoint.append("text")
.attr("x", x+2)
.attr("y", y+2)
.attr("class","text")
.text(text);
}
gpoint
.on("mousemove", function(d,i) {
var mouses = d3.mouse(svg.node())
.map( function(d) { return parseInt(d); } );
tooltip.classed("hidden", false)
.attr("style", "left:"+(mouses[0])+"px;top:"+(mouses[1])+"px")
.html(d.CapitalName);
})
.on("mouseout", function(d,i) {
tooltip.classed("hidden", true);
});
当我现在将鼠标悬停在其中一个大写字母上时,它会显示undefined的"Cannot read property"CapitalName"。
有人能帮我吗?
正如我在评论中所说,
你把数据绑定到gpoint了吗?它看起来不像,所以d3不会传递数据(mousemove函数中的d(。因此错误:无法读取未定义的属性"CapitalName">
这是因为您没有使用d3
数据绑定。如果我读对了你的代码,你正在做这样的事情:
var myDat = [{lat: 34, lon: 39, CapitalName: "akdjf"}, etc...]
for (var i = 0; i < myDat.length; i++){
addpoint(myDat[i].lat,myDat[i].lon,myDat[i].CapitalName);
}
不过,d3
希望绑定数据,然后在内部循环。像这样的东西(完全未经测试,但希望你能明白(:
d3.csv("data/country-capitals.csv", function(err, capitals) {
var gpoint = g.selectAll('.gpoint')
.data(capitals) //<-- bind your data
.enter() //<-- enter selection
.append("g")
.attr("class", "gpoint");
gpoint.append("circle")
.attr("cx", function(d, i){
return projection([d.lat,d.lon])[0]; //<-- bound data and d is passed in...
}).attr("cy", function(d, i){
return projection([d.lat,d.lon])[1];
});
gpoint.on("mousemove", function(d,i) {
var coors = d3.mouse(this);
tooltip.classed("hidden", false)
.attr("style", "left:"+(coors.x)+"px;top:"+(coors.y)+"px") //<- use d3.mosue to get position
.html(d.CapitalName); //<-- bound data d is passed...
});
}
编辑以供评论
是的,你需要转换成数字。d3
为它提供了一个方便的回调:
d3.csv("data/country-capitals.csv", function(d) {
return {
CapitalLongitude = +d.CapitalLongitude,
CapitalLatitude = +d.CapitalLatitude,
CapitalName = d.CapitalName
};
}, function(error, capitals) {
// rest of code here
});
相关文章:
- d3.js Chord图的动态工具提示
- Graphiti中是否有任何工具提示功能
- "工具提示"jQuery插件坏了
- 单元格的工具提示或标题不显示超过2000个字符
- 必应地图v8图钉工具提示
- 使用d3.js在地图上创建工具提示
- 在d3.js地图中添加工具提示
- 地图框工具提示消失
- 鼠标悬停图像地图上的工具提示
- 如何更改谷歌地图“图形管理器”工具栏工具提示
- 在谷歌地图v3中显示鼠标悬停事件的工具提示
- 图像地图中的纯CSS数据工具提示(jquery?)
- 谷歌地图工具提示mouseover/mouseout
- 悬停在工具提示回调(用于Google地图)
- 添加默认的谷歌地图工具提示
- 在D3中添加一个工具提示到谷歌地图叠加
- 悬停在美国地图上的工具提示
- 谷歌地图标记工具提示不显示(API v3)
- D3地图工具提示
- 谷歌地图标记工具提示