Estoy tratando de mostrar algunas líneas de tiempo usando el gráfico apilado D3. tengo estos errores
Error: atributo x: longitud esperada, "NaN". Error: ancho de atributo: longitud esperada, "NaN".
Aquí está mi código fuente adaptado:
$scope.createTimeline = function(callsSource, tag, nameField) { var colorScale = d3.scale.ordinal().range(['#008000','#FF0000']).domain(['ok','ko']); var chart = d3.timeline() .rotateTicks(45) .stack() .itemHeight(12) .itemMargin(2) .showTimeAxisTick() .tickFormat({format: d3.time.format("%X.%L"), numTicks:15, tickSize: 5}) .showTimeAxisTickFormat({stroke: "stroke-dasharray", spacing: "4 5"}) .colors( colorScale ) .colorProperty('status'); var svg = d3.select(tag).append("svg").attr("width", 950); var listSeg = new Array(); var calls = callsSource.slice(0); calls.reverse(); for (var i = 0; i < calls.length; i++) { var seg = {status:(calls[i].retHttp == "200" ? 'ok' : 'ko'), times: [{label:calls[i][nameField]||"unknown","starting_time": calls[i].startDate||calls[i].endDate, "ending_time": calls[i].endDate||calls[i].startDate}]}; listSeg.push(seg); } svg = svg.datum(listSeg).call(chart); };Cuando inspecciono mi página HTML, puedo ver que en mi svg x y los atributos de ancho son NaN
¡Cualquier ayuda por favor!
Es causado por:
"starting_time": calls[i].startDate||calls[i].endDate, "ending_time": calls[i].endDate||calls[i].startDate startDate y endDate no son una marca de tiempo.