问题
I am trying to accomplish this stacked area graph using NVD3.js: http://nvd3.org/examples/stackedArea.html
I have made a webservice that connects to my veterinarian sql server using visual studio. It works when tested separately. I want to present the number of daily new clinical cases. I am new to D3 and NVD3. However, both libraries look amazing. I have tried to look at other posts and tutorials, but I am confused.
Essentially, I tried to copy-and-paste the example code. My JSON format is:
[{"key":"SSB","values":[]},{"key":"GEN","values":[]},{"key":"LYM","values":[]},{"key":"LUD","values":[]},{"key":"GCC","values":[{"dateOpened":"2015-06-01","total":1},{"dateOpened":"2015-06-15","total":2},{"dateOpened":"2015-06-17","total":2},{"dateOpened":"2015-06-22","total":1},{"dateOpened":"2015-06-29","total":1},{"dateOpened":"2015-07-21","total":1},{"dateOpened":"2015-07-22","total":1},{"dateOpened":"2015-08-10","total":1},{"dateOpened":"2015-08-11","total":1},{"dateOpened":"2015-08-19","total":1},{"dateOpened":"2015-08-23","total":1},{"dateOpened":"2016-06-07","total":3}]},{"key":"MAC","values":[{"dateOpened":"2016-06-07","total":1}]},{"key":"MMB","values":[{"dateOpened":"2015-01-02","total":2},{"dateOpened":"2015-01-05","total":1},{"dateOpened":"2015-01-06","total":4},{"dateOpened":"2015-01-07","total":1},{"dateOpened":"2015-01-08","total":2},{"dateOpened":"2015-01-09","total":1},{"dateOpened":"2015-01-12","total":2},{"dateOpened":"2015-01-13","total":6},{"dateOpened":"2015-01-14","total":3},{"dateOpened":"2015-01-15","total":3},{"dateOpened":"2015-01-16","total":2},{"dateOpened":"2015-01-19","total":7},{"dateOpened":"2015-01-20","total":4},{"dateOpened":"2015-01-21","total":1},{"dateOpened":"2015-01-22","total":3},{"dateOpened":"2015-01-23","total":4},{"dateOpened":"2015-01-26","total":3},{"dateOpened":"2015-01-27","total":5},{"dateOpened":"2015-01-28","total":3},{"dateOpened":"2015-01-29","total":3},{"dateOpened":"2015-01-30","total":6},{"dateOpened":"2015-02-03","total":8},{"dateOpened":"2015-02-04","total":10},{"dateOpened":"2015-02-05","total":8},{"dateOpened":"2015-02-06","total":17},{"dateOpened":"2015-02-07","total":1},{"dateOpened":"2015-02-08","total":2},{"dateOpened":"2015-02-09","total":3},{"dateOpened":"2015-02-10","total":2},{"dateOpened":"2015-02-12","total":5},{"dateOpened":"2015-02-13","total":3},{"dateOpened":"2015-02-17","total":6},{"dateOpened":"2015-02-18","total":4},{"dateOpened":"2015-02-19","total":5},{"dateOpened":"2015-02-20","total":2},{"dateOpened":"2015-02-22","total":1},{"dateOpened":"2015-02-24","total":2},{"dateOpened":"2015-02-25","total":2},{"dateOpened":"2015-02-27","total":8},{"dateOpened":"2015-03-03","total":7},{"dateOpened":"2015-03-04","total":4},{"dateOpened":"2015-03-05","total":2},{"dateOpened":"2015-03-06","total":5},{"dateOpened":"2015-03-08","total":1},{"dateOpened":"2015-03-09","total":3},{"dateOpened":"2015-03-10","total":4},{"dateOpened":"2015-03-11","total":6},{"dateOpened":"2015-03-12","total":3},{"dateOpened":"2015-03-13","total":2},{"dateOpened":"2015-03-15","total":1},{"dateOpened":"2015-03-17","total":5},{"dateOpened":"2015-03-18","total":2},{"dateOpened":"2015-03-19","total":1},{"dateOpened":"2015-03-20","total":14},{"dateOpened":"2015-03-22","total":1},{"dateOpened":"2015-03-23","total":1},{"dateOpened":"2015-03-24","total":4},{"dateOpened":"2015-03-25","total":2},{"dateOpened":"2015-03-26","total":8},{"dateOpened":"2015-03-27","total":13},{"dateOpened":"2015-03-28","total":1},{"dateOpened":"2015-03-29","total":1},{"dateOpened":"2015-04-10","total":1},{"dateOpened":"2015-04-24","total":2},{"dateOpened":"2015-07-08","total":1},{"dateOpened":"2016-03-15","total":1},{"dateOpened":"2016-03-25","total":1},{"dateOpened":"2016-06-07","total":3}]}]
Here is the sample's JSON sample file:
[
{
"key" : "North America" ,
"values" : [ [ 1025409600000 , 23.041422681023] , [ 1028088000000 , 19.854291255832] , [ 1030766400000 , 21.02286281168] , [ 1033358400000 , 22.093608385173] , [ 1036040400000 , 25.108079299458] , [ 1038632400000 , 26.982389242348] , [ 1041310800000 , 19.828984957662] , [ 1043989200000 , 19.914055036294] , [ 1046408400000 , 19.436150539916] , [ 1049086800000 , 21.558650338602] , [ 1051675200000 , 24.395594061773] , [ 1054353600000 , 24.747089309384] , [ 1056945600000 , 23.491755498807] , [ 1059624000000 , 23.376634878164] , [ 1062302400000 , 24.581223154533] , [ 1064894400000 , 24.922476843538] , [ 1067576400000 , 27.357712939042] , [ 1070168400000 , 26.503020572593] , [ 1072846800000 , 26.658901244878] , [ 1075525200000 , 27.065704156445] , [ 1078030800000 , 28.735320452588] , [ 1080709200000 , 31.572277846319] , [ 1083297600000 , 30.932161503638] , [ 1085976000000 , 31.627029785554] , [ 1088568000000 , 28.728743674232] , [ 1091246400000 , 26.858365172675] , [ 1093924800000 , 27.279922830032] , [ 1096516800000 , 34.408301211324] , [ 1099195200000 , 34.794362930439] , [ 1101790800000 , 35.609978198951] , [ 1104469200000 , 33.574394968037] , [ 1107147600000 , 31.979405070598] , [ 1109566800000 , 31.19009040297] , [ 1112245200000 , 31.083933968994] , [ 1114833600000 , 29.668971113185] , [ 1117512000000 , 31.490638014379] , [ 1120104000000 , 31.818617451128] , [ 1122782400000 , 32.960314008183] , [ 1125460800000 , 31.313383196209] , [ 1128052800000 , 33.125486081852] , [ 1130734800000 , 32.791805509149] , [ 1133326800000 , 33.506038030366] , [ 1136005200000 , 26.96501697216] , [ 1138683600000 , 27.38478809681] , [ 1141102800000 , 27.371377218209] , [ 1143781200000 , 26.309915460827] , [ 1146369600000 , 26.425199957518] , [ 1149048000000 , 26.823411519396] , [ 1151640000000 , 23.850443591587] , [ 1154318400000 , 23.158355444054] , [ 1156996800000 , 22.998689393695] , [ 1159588800000 , 27.9771285113] , [ 1162270800000 , 29.073672469719] , [ 1164862800000 , 28.587640408904] , [ 1167541200000 , 22.788453687637] , [ 1170219600000 , 22.429199073597] , [ 1172638800000 , 22.324103271052] , [ 1175313600000 , 17.558388444187] , [ 1177905600000 , 16.769518096208] , [ 1180584000000 , 16.214738201301] , [ 1183176000000 , 18.729632971229] , [ 1185854400000 , 18.814523318847] , [ 1188532800000 , 19.789986451358] , [ 1191124800000 , 17.070049054933] , [ 1193803200000 , 16.121349575716] , [ 1196398800000 , 15.141659430091] , [ 1199077200000 , 17.175388025297] , [ 1201755600000 , 17.286592443522] , [ 1204261200000 , 16.323141626568] , [ 1206936000000 , 19.231263773952] , [ 1209528000000 , 18.446256391095] , [ 1212206400000 , 17.822632399764] , [ 1214798400000 , 15.53936647598] , [ 1217476800000 , 15.255131790217] , [ 1220155200000 , 15.660963922592] , [ 1222747200000 , 13.254482273698] , [ 1225425600000 , 11.920796202299] , [ 1228021200000 , 12.122809090924] , [ 1230699600000 , 15.691026271393] , [ 1233378000000 , 14.720881635107] , [ 1235797200000 , 15.387939360044] , [ 1238472000000 , 13.765436672228] , [ 1241064000000 , 14.631445864799] , [ 1243742400000 , 14.292446536221] , [ 1246334400000 , 16.170071367017] , [ 1249012800000 , 15.948135554337] , [ 1251691200000 , 16.612872685134] , [ 1254283200000 , 18.778338719091] , [ 1256961600000 , 16.756026065421] , [ 1259557200000 , 19.385804443146] , [ 1262235600000 , 22.950590240168] , [ 1264914000000 , 23.61159018141] , [ 1267333200000 , 25.708586989581] , [ 1270008000000 , 26.883915999885] , [ 1272600000000 , 25.893486687065] , [ 1275278400000 , 24.678914263176] , [ 1277870400000 , 25.937275793024] , [ 1280548800000 , 29.461381693838] , [ 1283227200000 , 27.357322961861] , [ 1285819200000 , 29.057235285673] , [ 1288497600000 , 28.549434189386] , [ 1291093200000 , 28.506352379724] , [ 1293771600000 , 29.449241421598] , [ 1296450000000 , 25.796838168807] , [ 1298869200000 , 28.740145449188] , [ 1301544000000 , 22.091744141872] , [ 1304136000000 , 25.07966254541] , [ 1306814400000 , 23.674906973064] , [ 1309406400000 , 23.418002742929] , [ 1312084800000 , 23.24364413887] , [ 1314763200000 , 31.591854066817] , [ 1317355200000 , 31.497112374114] , [ 1320033600000 , 26.67238082043] , [ 1322629200000 , 27.297080015495] , [ 1325307600000 , 20.174315530051] , [ 1327986000000 , 19.631084213898] , [ 1330491600000 , 20.366462219461] , [ 1333166400000 , 19.284784434185] , [ 1335758400000 , 19.157810257624]]
}
]
Please note that the date format is different (I don't understand how to read), and that values arrays have captions (i.e. "dateOpened","total"), whereas the sample values arrays don't.
<script type="text/javascript">
$(document).ready(function () {
$(document).on("click", "#btGO", function () {
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
var resultElement = $("#resultDiv");
var successCallBack;
$.ajax({
url: "dataWebService.asmx/getCasesForDateInterval",
method: "post",
data: {startDate: startDate, endDate: endDate},
dataType: "json",
success: function (data) {
//Where I should call my NVD3 graph?
d3.json(data, function (data) {
nv.addGraph(function () {
var chart = nv.models.stackedAreaChart()
.margin({ right: 100 })
.x(function (d) { return d.dateOpened })
.y(function (d) { return d.total })
.useInteractiveGuideline(true)
.rightAlignYAxis(true)
.transitionDuration(500)
.clipEdge(true);
//Format x-axis labels with custom function. I don't understand how to go from here
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#chart svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});
}
});
});
});
</script>
...
<div id="chart svg">
<svg></svg>
</div>
I have been working on it for quite a while, but I feel that I am close. I would greatly appreciate the community's feedback and some pseudocode to study. Thank you very much for your time!
回答1:
This line is incorrect:
d3.json(data, function (data) {
You have already fetched the data via ajax and you are already in the success block. doing d3.json is meaningless...
It should be this:
$.ajax({
url: "dataWebService.asmx/getCasesForDateInterval",
method: "post",
data: {
startDate: startDate,
endDate: endDate
},
dataType: "json",
success: function(data) {
//You should call my NVD3 here
nv.addGraph(function() {
var chart = nv.models.stackedAreaChart()
.margin({
right: 100
})
.x(function(d) {
return d.dateOpened
})
.y(function(d) {
return d.total
})
.useInteractiveGuideline(true)
.rightAlignYAxis(true)
.transitionDuration(500)
.clipEdge(true);
//Format x-axis labels with custom function. I don't understand how to go from here
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#chart svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
}
});
来源：https://stackoverflow.com/questions/37756244/i-am-trying-to-get-nvd3-to-work-with-data-from-an-ajax-request