27

d3.js で外部の json ファイルからデータを取得する例がいくつかあります。しかし、これらのサンプルには json が表示されていないため、実際にどのように機能するかを確認したいと考えています。

このjsonファイルtest.jsonがあり、次のようになります

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

そして、これらのデータで散布図を作成したいと思います。

d3.js スクリプト内。ここまで追加しました。

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");

このデータセットを使用する場合:

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

これを追加しましたが、正常に動作します。

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

外部のjsonファイルを使用する場合、データを呼び出すこの部分をどのように変更する必要があるのか​​ 疑問に思っています。誰かが私にこれを教えてくれることに本当に感謝します！どうもありがとう。

4

2 に答える 2

28

このようなことを試してください

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

data.js または data.json または js コンテンツが含まれている限り、呼び出したいものは何でも json ファイルです。https://github.com/mbostock/d3/wiki/Requestsも読んでみてください。json データを使用するすべてのコードは、json コールバック関数から呼び出されます。

于 2012-05-13T19:52:33.733 に答える
15

これらに精通している場合は、JqueryJSON呼び出しを使用することもできます。または、次のように、JSONに割り当てられている変数を参照するスクリプトタグを使用することもできます。

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

ここで、us-pres.jsonは次のように始まります。

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

JSONを変数（コレクション）に入れる限り、d3は実際にはそれをどのように行うかを気にしません。そこに到達したら、d3.data(dataset)呼び出しを使用して割り当てるだけです。

于 2012-05-14T18:53:11.163 に答える