Вопрос по json, javascript – d3.js & JSON - простой пример кода?

26

Есть несколько примеров получения данных из внешнего файла json в d3.js. Но эти образцы не показывают 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. Я буду очень признателен, кто-то может научить меня этому! Большое спасибо.

Ваш Ответ

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.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
14

Вы также можете использоватьJQuery JSON вызывает если вы более знакомы с ними. Или вы можете просто использовать тег script, который ссылается на переменную, назначаемую JSON, например:

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

где us-pres.json начинается так:

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

Пока вы помещаете JSON в переменную (коллекцию), d3 не заботится о том, как вы это делаете. Как только он появится, вы просто назначаете его, используя d3.data(dataset) вызов.

Error: User Rate Limit Exceeded"cx"Error: User Rate Limit Exceeded"cy"Error: User Rate Limit Exceededreturn x(d.property1) return y(d.property2).

Похожие вопросы