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();

我想将participantID关联到图表中，以便当有人点击某个栏时，该ID通过其他地方的ajax调用发送。我遇到的挑战是，我似乎只能访问我在创建时明确发送给图表的值（通过addCategoryAxis和addMeasureAxis函数）并且我无法分配任何值更多值到酒吧。

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

Answer 1

这里的困难在于，凹坑适用于聚合数据集，因此无法直接访问原始数据行。如果您将数据预先汇总到您需要的水平，然后告诉酒窝按照您想要的值分解系列（这对绘图没有影响），这可以解决，这将使额外的值可访问。在这个小提琴中，我使用与系列相关联的音量字段更新标签，即使它没有被绘制。

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/

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/

将其他数据点添加到图表

2 个答案: