Dessiner des cercles à l'aide de D3

Le code suivant est supoosed pour dessiner des cinq cercles les uns à côté des autres

<head>
<script type='text/javascript' src='jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script type='text/javascript' src='knockout-2.3.0.js'></script>
<script src="bootstrap.min.js"></script>

<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet" media="screen">
<link href="sticky-footer.css" rel="stylesheet">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

</head>

<body>
  <div id="viz"></div>

<script type="text/javascript">
    var dataset = [],
    i = 0;

    for(i=0; i<5; i++){
        dataset.push(Math.round(Math.random()*100));
    }        

    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 400)
        .attr("height", 400);    

    sampleSVG.selectAll("circle")
        .data(dataset)
        .enter().append("circle")
        .style("stroke", "gray")
        .style("fill", "black")
        .attr("height", 40)
        .attr("width", 75)
        .attr("x", 50)
        .attr("y", 20);

  </script>
 </html>

Il n'est pas vraiment mon code, je l'ai juste copié à partir de ce site
http://christopheviau.com/d3_tutorial/

Le problème est que ce code n'est pas de dessiner un cercle.
Bien que lorsque j'essaie d'utiliser le chrome de l'outil inspecter l'élément, je trouve que les cercles sont là, mais ils ne sont pas visibles.

J'ai pensé que la raison est la couleur blanche de l'cercles bien que la course n'est pas.
Toutefois en changer la couleur n'était pas vraiment utile.

Et le problème est que Dreamweaver n'est pas vraiment aider comme il le fait pour le code HTML ou JavaScript par exemple.

Des suggestions pour la solution de ce problème, ou toute recommandation pour l'éditeur ?

  • Vous n'êtes jamais à la fermeture de <body>. Est-ce intentionnel?
  • Non, il n'est pas. Cependant, il n'est vraiment faire une différence, je suis toujours confronté au même problème
  • Hmm, x, y, width et height attributs aussi ne signifient rien pour SVG cercles. Ils sont défini par cx, cy et r. Comme ceci. (La raison en montrant un cercle est parce que tous les cinq sont empilés dans la même position.)
InformationsquelleAutor Abdel-Rahman Shoman | 2013-08-15
  1. 9

    On dirait que vous avez pris un exemple qui a généré des rectangles et il a changé de cercles, mais des cercles n'ont pas de x, y, hauteur et largeur des attributs, ils ont cx, cy et attributs radius au lieu.

    sampleSVG.selectAll("circle")
    .data(dataset)
    .enter().append("circle")
    .style("stroke", "gray")
    .style("fill", "black")
    .attr("r", 40)
    .attr("cx", 50)
    .attr("cy", 20);

    Permettra de tracer plusieurs cercles l'un sur l'autre.

    InformationsquelleAutor Robert Longson
  2. 3

    @Robert Longson
    Merci À Robert Longson

    Et si vous voulez éviter les interlapping entre les cercles
    Voici le code

    <script type="text/javascript">
    var dataset = [],
    i = 0;

    for(i=0; i<5; i++){
        dataset.push(Math.round(Math.random()*100));
    }

    var sampleSVG = d3.select("#viz")
    .append("svg")
    .attr("width", 500)
    .attr("height", 300);    

    sampleSVG.selectAll("circle")
    .data(dataset)
    .enter().append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 40)
    .attr("cx", function(d, i){return 50 + (i*80)})
    .attr("cy", 120);
</script>
    InformationsquelleAutor Abdel-Rahman Shoman