J'essaie de tracer des données à partir d'un fichier csv en utilisant d3.js, pour ce faire, je charge mes données et les filtre dans l'appel d3.csv:

d3.csv("data/survival-rates.csv", function(d){
    d['Survival Rate']=Math.round(d['Survival Rate']);
    if(d['Sex']=='male'){
        return d;
    }
}, draw);//draw is the callback function to create the svg element

Maintenant, dans la fonction draw utilisée comme rappel, je crée un élément SVG et je l'ajoute à un div que j'ai créé précédemment:

//inside the function draw(data){...
var svg = d3.select("#myChart1")
            .append("svg")
            .attr("width", width + margin)
            .attr("height", height + margin)
            .append('g')
            .attr('class','chart');

        console.table(data);

        var myChart1 = new dimple.chart(svg, data);
        myChart1.addCategoryAxis("x", "Pclass"); 
        myChart1.addMeasureAxis("y", "Survival Rate");
        myChart1.draw();

Ici, j'obtiens une erreur:

Unexpected value Infinity parsing x attribute.

Même si console.table(data) n'affiche aucune valeur NaN dans l'ensemble de données.

J'ai cherché cette erreur et je n'ai rien trouvé dessus, merci d'avance

Modifier

Voici la structure des données avec lesquelles je travaille:

Pclass,Sex,Survival Rate
1,female,96.8085106383
1,male,36.8852459016
2,female,92.1052631579
2,male,15.7407407407
3,female,50.0
3,male,13.5446685879
1
Hicham Zouarhi 16 janv. 2017 à 15:03

2 réponses

Meilleure réponse

Vérifiez le plunker: plunker

<head>
  <script data-require="d3@3.4.6" data-semver="3.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.1/d3.js"></script>
  <script data-require="dimplejs@*" data-semver="2.1.2" src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.3.0/dimple.latest.js"></script>
</head>

<body>
<br>
<div id="chartContainer1">
    <script>
      d3.csv("data/survivals-rates.csv", function(d) {
        d['Survival Rate'] = Math.round(d['Survival Rate']);
        if (d['Sex'] == 'male') {
          return d;
        }
      }, draw);

  function draw(data) {
        var svg = d3.select("#chartContainer1")
          .append("svg")
          .attr("width", 400)
          .attr("height", 1200)
          .append('g')
          .attr('class', 'chart');
        console.table(data);
        var myChart1 = new dimple.chart(svg, data);
        myChart1.setBounds(60, 30, 510, 330)
        myChart1.addCategoryAxis("x", "Pclass");
        myChart1.addMeasureAxis("y", "Survival Rate");
        myChart1.addSeries(null, dimple.plot.bar);
        myChart1.addLegend(65, 10, 510, 20, "right");
        myChart1.draw();
      }
    </script>

  </div>
</body>

</html>
1
MMK 16 janv. 2017 à 14:10

Le problème était que j'ai oublié une ligne dans mon code pour ajouter la série au graphique, et c'est ce qui a causé cette erreur:

myChart.addSeries(null, dimple.plot.bar);
0
Hicham Zouarhi 16 janv. 2017 à 13:59