Javascript D3地图上每个SVG圆圈的不同工具提示

我正在制作一张企业的世界地图，并将其与绩效评级联系起来：因此，每个企业都将由一个点表示，该点有一个带有绩效（和其他信息）的工具提示。我正在使用地图示例

地图数据： 因此，pointsData JSON对象的形式如下

[{“业务”：“b1”，“位置”：[long1，lat1]}，{“业务名称”：“b2”，“位置”：[long2，lat2]}…

]

工具提示问题： 我可以用点和相同的工具提示完美地显示地图，直到我尝试使用不同的工具提示。我用动态工具提示研究的许多D3示例只适用于图表——我的困难是在地图上的每个SVG圆圈上添加工具提示的JSON数据

这是我迄今为止的尝试，它没有显示任何点，也没有显示任何控制台错误（添加到

。每个（函数（d，i）{..}

不再绘制部件，但它是将每个位置链接到其后续业务和性能评级所必需的。）

---

输入选择执行您在不使用

.each（）

的情况下尝试执行的操作。Bostock将D3设计为将数据连接到元素，以便：

告诉D3你想要什么，而不是告诉D3怎么做。你需要什么 希望圆元素与数据相对应。是否需要一个圆 根据基准。然后，告诉D3，而不是指示D3创建圆 选择“圆”应与数据相对应。此概念是 调用数据连接（）

我建议您查看一些有关输入、更新和退出选择的示例。不过，可能您最初是使用普通圆（和相同的工具提示）执行此操作的：

如果是，则只需访问附加属性的数据即可。如果不是，则需要正确使用enter选择。 在任何情况下，都可以使用enter选择和指定的数据格式实现：

var pointsData=[
{“业务名称”：“业务A”，
“位置”：[50100]，
“性能”：“100”}，
{“业务名称”：“业务B”，
“位置”：[100,50]，
“性能”：“75”
},  
{“业务名称”：“业务C”，
“地点”：[150150]，
“性能”：“50”
}];
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，300）
.attr（“高度”，300）；
变量工具提示=d3。选择（“主体”）。追加（“div”）
.attr（“类”、“工具提示”）
.style（'opacity'，0）
.style（'位置'，'绝对'）
.style（'padding'，'0 10px'）；
svg.selectAll（“圆”）//空选择
.data（pointsData）//要绑定到所选内容的数据
.enter（）//enter选择包含选择中的新元素
.append（“圆”）//为每个新元素追加一个圆
//根据每个圆的基准管理其样式：
.attr（“cx”，函数（d）{返回d.location[0]；}）
.attr（“cy”，函数（d）{返回d.location[1]；}）
.attr（“r”，10）
.on（“鼠标悬停”，功能（d）{
tooltip.transition（）
.style（'opacity'，.9）
.style（'background'，'steelblue'）
.text（“业务：+d.businessName+”.performance“+d.performance”）
.style（'left'，（d3.event.pageX-35）+'px'）
.style（'top'，（d3.event.pageY-30）+'px'）
.期限（100）；
})
.开启（“鼠标出”，功能（d）{
tooltip.transition（）
.style（“不透明度”、“0”）
.期限（50）；
})

---

您不需要

每个
。只需使用常规的回车选择。@GerardoFurtado yes
。数据（点）。回车（）
当我有一个包含所有地图纬度和经度的数组时，确实会绘制所有的点，但我正试图通过pointsData对象进行循环，因为将每个纬度/经度圆与其对应的数据链接起来非常重要，这样每个工具提示都可以不同。每个工具提示中的数据都会因简单、规则的输入选择而不同。是否这样做你看到“mouseover”回调中的
d
参数了吗？用它吧。我不确定，但你似乎误解了数据连接d3的原理。d将是每个数据点在三种状态之一（输入、删除、更新）下的迭代，感谢一百万-我对JS的经验很少（第一次使用d3）因此，这消除了我对数据绑定的困惑！还有一个问题：这个链接如何链接到我已经拥有的地图缩放功能？数据点在我缩放之前不会显示：
函数zoomed（）{projection.translate（d3.event.translate）.scale（d3.event.scale）；gBackground.selectAll（“path”）.attr（“d”，path）gPoints.selectAll（“圆”）.attr（“cx”，函数（d，i）{返回投影（d.location）[0]；}）.attr（“cy”，函数（d，i）{返回投影（d.location）[1]；}
很难说，您使用的是v4吗？作为输入，更新周期有点不同，可能会中断v3的代码。我会将此作为一个新问题发布，如果可能的话，还包括进行初始选择和附加的代码（作为一个新问题，您也会更加关注它-注释的可见性不高）
pointData = {
    "businessName": businessName,
    "location": location,
    "performance": currperformance
}

pointsData.push(pointData);

d3.json("https://raw.githubusercontent.com/d3/d3.github.com/master/world-110m.v1.json", function (error, topo) {
    if (error) throw error;

    gBackground.append("g")
        .attr("id", "country")
        .selectAll("path")
        .data(topojson.feature(topo, topo.objects.countries).features)
        .enter().append("path")
        .attr("d", path);


    gBackground.append("path")
        .datum(topojson.mesh(topo, topo.objects.countries, function (a, b) { return a !== b; }))
        .attr("id", "country-borders")
        .attr("d", path);


    //Tooltip Implementation
    var tooltip = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style('opacity', 0)
        .style('position', 'absolute')
        .style('padding', '0 10px');


    gPoints.selectAll("circle")
        .each(function (d, i) {
            this.data(pointsData.location).enter()
                .append("circle")
                .attr("cx", function (d, i) { return projection(d)[0]; })
                .attr("cy", function (d, i) { return projection(d)[1]; })
                .attr("r", "10px")
                .style("fill", "yellow")
                .on('mouseover', function (d) {
                    tooltip.transition()
                        .style('opacity', .9)
                        .style('background', 'black')
                        .text("Business" + pointsData.businessName + "performance" + pointsData.performance)
                        .style('left', (d3.event.pageX - 35) + 'px')
                        .style('top', (d3.event.pageY - 30) + 'px')
                })
                .on('mouseout', function (d) {
                    tooltip.transition()
                        .style("visibility", "hidden");
                })
        });
}); 

  svg.selectAll("circle")
      .data([[long,lat],[long,lat]])
      .enter()
      .append("circle")
      .attr("cx", function(d,i) { return projection(d)[0]; })
      .attr("cy", function(d,i) { return projection(d)[1]; })