Dimple Tooltip添加自定义文本

时间:2016-07-05 13:30:03

标签: javascript d3.js dimple.js

我正在构建一个带有凹坑js的图表并尝试调整工具提示。我想出了如何添加"性别"和"生存率"。现在我想添加存储在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();

1 个答案:

答案 0 :(得分:0)

flatgroups是一个对象数组。当您使用for (i in flatgroups)迭代它时,您正在迭代的是整数数组键。换句话说,此for循环中的i值将为01等。

您可以在此处添加var group = flatgroups[i];之类的行作为for循环中的第一行。然后使用group(实际的组对象)来引用组而不是i(整数键)。

我怀疑您需要将行if (i.key == key)更改为更像if (group.Gender == key)的内容,因为key似乎不是// cookies +----+---------+-------------------+------------+ | id | user_id | token | expire | +----+---------+-------------------+------------+ | 1 | 32423 | dki3j4rf9u3e40... | 1467586386 | | 2 | 65734 | erhj5473fv34gv... | 1467586521 | | 3 | 21432 | 8u34ijf34t43gf... | 1467586640 | +----+---------+-------------------+------------+ 中的实际键之一你创建的对象。

相关问题