酒窝工具提示添加自定义文本

Question

我正在使用 dimple js 构建图表并尝试调整工具提示。我想出了如何添加 "Gender" 和 "Survival Rate"。现在我想添加存储在 flatgroups 对象中的生存计数。我怎样才能做到这一点？下面的努力（使用 for 循环）似乎不起作用。它给我一个错误，说 flatgroups 对象是未定义的，它不能占用未定义对象的长度。谢谢！

 function draw_bar(data) {
  var svg = dimple.newSvg("#chart1", 800, 600);

// Group/nest data by gender and calculate survival rate and number of people that survived per gender 
var grouped_data = d3.nest()
                .key(function (d) {return d.Sex;})
                .rollup(function (v) {return {"Survival Rate": d3.mean(v, 
                                                                        function (d) {
                                                                            return d.Survived;
                                                                                     }
                                                                      ), 
                                              "Survival Count": d3.sum(v, 
                                                                        function (d) {
                                                                            return d.Survived;
                                                                                     }
                                                                      )
                                             };
                                     }
                        )
                .entries(data);

  // flatten the data structure stored in grouped_data
   var flatgroups = [];
   grouped_data.forEach(function (group) {
            flatgroups.push({
                        "Gender": group.key,
                        "Survival Rate": group.values["Survival Rate"],
                        "Survival Count": group.values["Survival Count"] 
                        });
                  });

  // Construct chart, set axis labels and draw it
  var chart = new dimple.chart(svg, flatgroups);
  var x = chart.addCategoryAxis("x", "Gender");
  x.title = "Gender";
  var y = chart.addMeasureAxis("y", "Survival Rate");
  y.title = "Survival Rate";
  // Format y-axis to show proportions with 2 decimals
  y.tickFormat = ',.2f';
  var series = chart.addSeries("Gender", dimple.plot.bar);
  series.getTooltipText = function (e) {
                        var key = e.key;
                         for (i in flatgroups) {
                            if (i.key == key) {
                                return [ "Gender" + ": " + e.cx,
                     "Survival Rate" + ": " + (e.cy).toFixed(2),
                     "Survival Count" + ": " + i["Survival Count"]

                                        ];
                                                            };
                         };
  };
  chart.assignColor("female", "red")
  chart.assignColor("male", "blue")
  chart.draw();

Answer 1

flatgroups 是一个对象数组。当您使用 for (i in flatgroups) 对其进行迭代时，您迭代的是整数数组键。换句话说，这个for循环中i的值将是0、1等

您在这里可以做的只是在 for 循环中添加一行 var group = flatgroups[i]; 作为第一行。然后使用 group（实际组对象）来引用组而不是 i（整数键）。

我也怀疑您需要将行 if (i.key == key) 更改为更类似于 if (group.Gender == key) 的内容，因为 key 似乎不是实际的键之一在您创建的对象中。

酒窝工具提示添加自定义文本

Dimple Tooltip Add custom text

javascript

d3.js

dimple.js