web-dev-qa-db-fra.com

d3.js et json - exemple de code simple?

Il existe quelques exemples pour obtenir des données à partir d'un fichier json externe dans d3.js. Mais ces échantillons ne montrent pas le json, donc je veux vraiment voir comment cela fonctionne.

J'ai ce fichier json test.json, et il ressemble à

[
    {"a":"-1.14","b":"4.14"},
    {"a":"-0.13","b":"1.38"},
    {"a":"-4.19","b":"1.43"},
    {"a":"-0.21","b":"3.34"}
]

Et je veux faire un nuage de points avec ces données.

Dans le script d3.js. J'ai ajouté jusqu'à présent.

var width = 400;
var height = 400;

var x = d3.scale.linear()
    .domain ([-5, 5])
    .range([0, width]);
var y = d3.scale.linear()
    .domain ([-5, 5])
    .range([0, height]);

var chart = d3.select("body").append("svg")
    .attr("width", width+70)
    .attr("height", height+70)
    .attr("class", chart)
    .append("g")
        .attr("transform", "translate(30, 30)");


chart.selectAll("xline")
    .data(x.ticks(11))
    .enter().append("line")
        .attr("x1", x)
        .attr("x2", x)
        .attr("y1", 0)
        .attr("y2", height)
        .style("stroke", "#ccc");

chart.selectAll("yline")
    .data(y.ticks(11))
    .enter().append("line")
        .attr("y1", y)
        .attr("y2", y)
        .attr("x1", 0)
        .attr("x2", width)
    .style("stroke", "#ccc");

Si j'utilise cet ensemble de données:

var dataset = [ [-1, -3], [2, 4], [3, -4], [-3, 1]];

J'ai ajouté cela et cela fonctionne bien.

   chart.selectAll("scatter-dots")
      .data(dataset)
      .enter().append("circle")
        .attr("cx", function (d) { return x(d[0]); } )
        .attr("cy", function (d) { return y(d[1]); } )
        .attr("r", 10)
        .style("opacity", 0.6);

Je me demande comment je devrais changer cette partie qui appelle les données, si j'utilise un fichier json externe. J'apprécierai vraiment que quelqu'un puisse m'apprendre cela! Merci beaucoup.

javascriptjsond3.js
26
clerksx

Essayez quelque chose comme ça

d3.json("data.js", function(data) {
alert(data.length)
});

où data.js ou data.json ou tout ce que vous voulez l'appeler tant qu'il contient du contenu js est votre fichier json. Essayez également de lire: https://github.com/mbostock/d3/wiki/Requests . Tout votre code qui utilise les données json sera appelé à partir de la fonction de rappel json.

28
paxRoman

Vous pouvez également utiliser appels Jquery JSON si vous les connaissez mieux. Ou vous pouvez même simplement utiliser une balise de script qui fait référence à une variable affectée à JSON, comme ceci:

<script src="us-pres.json" type="text/javascript"></script>

où us-pres.json commence comme ceci:

var dataset = {"state":"US",...

Tant que vous mettez le JSON dans une variable (collection), d3 ne se soucie pas vraiment de la façon dont vous le faites. Une fois qu'il est là, il vous suffit de l'attribuer à l'aide de l'appel d3 .data(dataset).

14
strack