Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

155
Visualizações
d3-timeline Error: <rect> attribute x: Expected length, "NaN"

I am trying to display some timelines using D3 stacked chart. I got this errors

Error: attribute x: Expected length, "NaN". Error: attribute width: Expected length, "NaN".

Here is my adapted source code:

$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);
};

The errors i console: enter image description here

When i inspect my HTML page, i can see that in my svg x and width attributes are NaN

enter image description here

Any help please!

about 4 years ago · Santiago Gelvez
1 Respostas
Responde à pergunta

0

It's caused by :

"starting_time": calls[i].startDate||calls[i].endDate, 
"ending_time": calls[i].endDate||calls[i].startDate 

startDate and endDate are not a timestamp.

about 4 years ago · Santiago Gelvez Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda