筛选源数据后的项目工具提示

Item tooltips after filtering source data

本文关键字：项目 工具提示 数据 筛选      更新时间：2023-11-27

快速熟悉D3.js。我注意到的一点是，如果我有一系列的圆（即散点图），并且我在它们的源数据中添加工具提示，那么在过滤数据并重新绘制圆时，更新这些工具提示似乎会有问题。以下是在筛选数据时调用的代码的一部分。请注意，过滤器是在一个不同但相关的图中通过鼠标调用的：

circs = itemCircles.selectAll('circle')
    .data(filteredData)
    .attr("cy", function (d) { return scatY(d.sim_fnl_occ); } )
    .attr("cx", function (d) { return scatX(d.sim_curr_occ); } )
    .attr('r', 5)
    ;
circs.enter().append('circle')
    .data(filteredData)
    .attr("cy", function (d) { return scatY(d.sim_fnl_occ); } )
    .attr("cx", function (d) { return scatX(d.sim_curr_occ); } )
    .attr('r', 5)
    ;
circs.append("svg:title")
    .text(function(d) { console.log(d.sim_curr_occ); // looking good!
    return d.sim_curr_occ });// looking bad:(

向控制台写入新子集数据的正确值；但是工具提示selves有不正确的数据。事实上，看起来新绘制的圆保留了原始的工具提示。我应该指出，圆圈画得很合适，只是通过svg:title的工具提示不正确。关于我做错了什么，有什么指导吗？

将标题附加在enter()上，而不是仅将其附加到circs上。

circs.enter().append('circle')
.data(filteredData)
.attr("cy", function (d) { return scatY(d.sim_fnl_occ); } )
.attr("cx", function (d) { return scatX(d.sim_curr_occ); } )
.attr('r', 5)
.append("svg:title")
.text(function(d) { 
  console.log(d.sim_curr_occ);
  return d.sim_curr_occ })
;
相关文章：