向图表添加其他数据点

我正在创建一个显示参与聊天室的简单条形图（使用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函数），并且我无法为bar指定更多值。

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

来源

2014-01-13 dearsina

你能告诉我们您所使用的代码？在D3中，你可以将任何数据绑定到DOM元素，所以你想要的应该没有问题。 –

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

这里的难点在于凹坑在聚合数据集上工作，所以您的原始数据行将无法直接访问。如果将数据预先聚合到所需的级别，然后告诉酒窝根据所需的值分解系列（这对图形没有任何影响），则可以解决这个问题，这将使额外的值可用。在这个小提琴中，我使用与该系列相关的音量字段来更新标签，即使它未被绘制。

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/

来源

2014-01-14 01:19:28

约翰，非常感谢，我仍然试图围绕类别和测量轴和系列，我怎样才能使用它们来存储变量以便在图表的“外部”使用。你的例子非常有帮助，现在我已经能够取得巨大成功。再次感谢！ – dearsina

如果你使用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/

来源

2014-01-13 19:38:06

Steven，谢谢你的回答，我的问题是专门用在dimple.js图表中，否则你的解决方案工作得很好。 – dearsina

向图表添加其他数据点

回答

相关问题