向圖表添加其他數據點

我正在創建一個顯示參與聊天室的簡單條形圖（使用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

向圖表添加其他數據點

回答

相關問題