javascript - d3.js & json-نموذج لشفرة بسيطة؟




(2)

هناك بعض الأمثلة للحصول على البيانات من ملف json خارجي في d3.js. لكن هذه العينات لا تظهر السيف ، لذلك أريد حقا أن أرى كيف يعمل.

لدي هذا الملف json file 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"}
]

وأريد إنشاء scatterplot مع هذه البيانات.

في البرنامج النصي 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 خارجي. سوف أقدر حقا أن يعلمني شخص ما هذا! تشكرات.


جرب شيئًا كهذا

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

حيث data.js أو data.json أو أيًا كان ما تريد أن تطلق عليه ما دام محتوى js هو ملف json الخاص بك. جرب أيضًا قراءة: https://github.com/mbostock/d3/wiki/Requests . ستتم استدعاء كل شفرتك التي تستخدم بيانات json من وظيفة استدعاء json.


يمكنك أيضًا استخدام مكالمات Jquery JSON إذا كنت أكثر دراية بها. أو يمكنك فقط استخدام علامة نصي تشير إلى متغير يتم تعيينه إلى JSON ، مثل:

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

حيث تبدأ بنا - pres.json مثل هذا:

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

طالما أنك تحصل على JSON في متغير (مجموعة) ، فإن d3 لا يهمك كيف تقوم بذلك. بمجرد وجوده ، يمكنك تعيينه باستخدام .data(dataset) d3 .data(dataset) .





d3.js