d3.js用按钮更新条形图工具提示

d3.js Update Bar Chart Tooltip with Buttons

本文关键字：条形图 工具提示 更新 按钮 js d3      更新时间：2023-09-26

我正在尝试使用按钮制作四个条形图，以分类我想要显示的条形图。正如您在我的代码中所看到的，总体而言，一切都很好。然而，现在我尝试在这里添加工具提示[2]，并意识到数据不会为每个图表更新。有人知道我该怎么做吗？我想在var提示上实现if else语句来选择正确的按钮，比如：

var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function(d) {                                                                            
          if(d3.select("#propertyCategory"))
                       return "No: <strong>" + d.propertyName + "</strong> foram registrados <strong>" + d.vacant + "</strong>";
                                              })

然而，它没有起作用，老实说，我不明白在这种情况下如何正确地实现选择，我对d3.js有点陌生，所以我不知道该怎么做才能解决这个问题。

可能是你可以有一个变量

  var selected = "ano2009";//set it to default value

现在，当年份发生变化时，更改所选变量。

像这样：

d3.select("#vacant")
    .on("click", function() {
        selected = "vacant";
        //Update scale domain

像这样：

   d3.select("#totalUnits")
        .on("click", function() {
           selected = "totalUnits";

也是如此

现在在提示功能中，您可以执行以下操作：

var tip = d3.tip()
                                                  .attr('class', 'd3-tip')
                                                  .offset([-10, 0])
                                                  .html(function(d) {
 //note d[selected] will select the clicked year data.                                                  
  return "No: <strong>" + d.propertyName + "</strong> foram registrados <strong>" + d[selected] + "</strong>";
                                                  })

此处的工作代码

相关文章：