向图表添加额外的数据点

Question

我正在使用 dimple.js 制作一个简单的条形图，显示聊天室中的参与情况。Y 轴是不同的参与者，X 轴是他们发送到聊天室的消息数量。

我要创建的图表非常简单，基于三列数据（participantID、Participant_Name、Message_Count）：

var svg = dimple.newSvg("#chrt_participants", 1200, 600);
var chrt_participants = new dimple.chart(svg, data.result);
chrt_participants.addCategoryAxis("y", "Participant_Name");
chrt_participants.addMeasureAxis("x", "Message_Count");
chrt_participants.addSeries(null, dimple.plot.bar);
chrt_participants.draw();

我希望将参与者ID与图表关联起来，这样当某人点击条形图时，该ID将通过ajax调用发送到其他地方。我遇到的挑战是，我似乎只能在创建图表时通过“addCategoryAxis”和“addMeasureAxis”函数明确发送的值来访问，而且我无法为柱形图分配更多的值。

因此，我的问题是，当这些变量没有任何“视觉目的”时，如何为图表元素分配更多变量？

- dearsina

---

你能展示一下你正在使用的代码吗？在D3中，你可以将任何数据绑定到DOM元素上，所以你想要的应该没有问题。 - Lars Kotthoff

Lars，我添加了一些代码，我的问题是如何将图表链接到我从中获取数据的相关行？ - dearsina

Answer 1

这里的难点在于dimble是在聚合数据集上工作，因此您的原始数据行将无法直接访问。如果您预先将数据聚合到所需的级别，然后告诉dimple按您想要的值对系列进行分解（这不会影响绘图），则可以解决此问题，这将使额外的值可访问。在这个fiddle中，我使用与系列相关联的volume字段更新标签，即使它没有被绘制。

chart = new dimple.chart(svg, data);
x = chart.addCategoryAxis("x", ["Fruit", "Year"]);
x.addGroupOrderRule([2012, 2013]);
chart.addMeasureAxis("y", "Value");
s = chart.addSeries(["Volume", "Year"], dimple.plot.bar);
s.addEventHandler("click", function (e) { 
d3.select("#infoLabel")
    .text("In " + e.seriesValue[1] + " we sold " + 
           e.seriesValue[0]  + " " + e.xValue + "s!");
});
chart.draw();

点击此处查看完整的工作示例：http://jsfiddle.net/uafGn/

- John Kiernander

---

John，非常感谢你，我仍在努力理解类别轴、度量轴和系列，以及如何使用它们来存储变量以供“图表外部”使用。你的示例非常有帮助，现在我已经成功地做到了。再次感谢！ - dearsina

Answer 2

如果您正在使用jQuery，我建议给它们全部分配相同的类名“example_class”（或者更好的名称）。

然后为每个元素分配动态ID，您可以解析出像“[user_id]：[x_axis]：[y_axis]”这样的内容。

接下来，添加一个jQuery函数，例如：

$('.example_class').on('click', function(){
    my_parse_function($(this).attr('id'));
}

或者，更好的方法是超越我，学习新的HTML5数据属性。

http://html5doctor.com/html5-custom-data-attributes/

- Steven Rogers

---

Steven，谢谢你的回答，我的问题是关于在dimple.js图表中使用，否则你的解决方案非常好。 - dearsina