Pertanyaan Memuat data D3.js dari string JSON sederhana


Sebagian besar contoh di galeri memuat data dari file TSV.

Bagaimana saya dapat mengonversi yang berikut ini untuk menggunakan variabel json lokal alih-alih data TSV?

d3.tsv("data.tsv", function(error, data) {

    var myEntitiesJson = getEntitiesJson(); // <------ use this instead of "data"
    data.forEach(function(d) {
        d.frequency = +d.frequency;
    });

    x.domain(data.map(function(d) { return d.letter; }));
    y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

    ...

    svg.selectAll(".bar")
        .data(data)     // <----- bind to myEntities instead
}

Sejauh yang saya tahu, saya hanya perlu melakukan sesuatu kepada entitas saya, John, untuk data-fy agar grafik bisa mengikatnya.

MEMPERBARUI

Saya membuat beberapa kemajuan. Saya menyambungkan entitas saya dari JSON dan grafiknya mulai mengambil bentuk baru.

Saat ini kode berikut pecah:

svg.selectAll(".bar")
    .data(myEntities)  // <-- this is an array of objects
    .enter().append("rect")

Ini yang menyebabkan:

Kesalahan: Nilai tidak valid untuk atribut y = "NaN"

Kesalahan: Nilai tidak valid untuk tinggi atribut = "NaN"


32
2018-04-02 12:56


asal


Jawaban:


untuk data jarak jauh.json ganti:

d3.tsv("data.tsv", function(error, data) {...}

dengan:

d3.json("data.json", function(error, data) {
    console.log(data); // this is your data
});

untuk data lokal:

var myData = { {date:'2013-05-01', frequency:99},
               {date:'2013-05-02', frequency:24} };

function draw(data) {
    console.log(data); // this is your data
}

draw(myData);

17
2018-04-02 13:35



Tidak ada cara sederhana untuk data-fy setiap json yang diberikan, karena tidak semua objek json adalah sama bentuk.

Dengan bentuk, maksud saya cara data diatur. Misalnya, keduanya '{"foo" : 1, "bar" : 2}' dan '{"names" : ["foo", "bar"], "values" : [1, 2]}' dapat digunakan untuk menyimpan data yang sama, tetapi menyimpan segala sesuatu dalam sebuah objek di mana tombol objek sesuai dengan nama titik data, dan satu menggunakan array terpisah untuk menyimpan nama dan nilai, dengan entri yang sesuai memiliki indeks array yang umum.

Namun ada seorang jendral proses Anda dapat pergi melalui untuk mengubah json menjadi data. Pertama, Anda harus menguraikan json Anda. Ini bisa dilakukan dengan standar javascript JSON obyek. Menggunakan JSON.parse(myJson) untuk mendapatkan data dari objek json Anda jika sudah diunggah ke klien. d3.json(my/json/directory, fn(){}) keduanya dapat memuat dan mengurai json Anda, jadi jika Anda memuatnya dari tempat lain di server Anda, ini mungkin cara yang lebih baik untuk membuat json menjadi objek.

Setelah Anda memasukkan json Anda ke dalam objek javascript, Anda masih perlu data-fy itu, yang merupakan bagian yang akan bergantung pada data Anda. Apa yang akan terjadi adalah beberapa bentuk array: [dataPoint1, dataPoint2, ...]. Untuk dua contoh yang saya berikan di atas, array yang Anda inginkan akan terlihat seperti ini:

[{'name' : 'foo', 'value' : 1}, {'name' : 'bar', 'value' : 2}]

Saya punya satu elemen dalam array saya untuk setiap titik data, dengan dua atribut: value dan name. (Dalam contoh Anda, Anda menginginkan atribut letter dan frequency)

Untuk masing-masing contoh saya, saya akan menggunakan fungsi yang berbeda untuk membuat array. Dengan garis ini sama:

var rawData = JSON.parse(myJson);

Json pertama saya dapat dikemas dengan fungsi ini:

var key;
var data = [];

for(key in rawData){
    if(rawData.hasOwnProperty(key)){
        data.push({'name' : key, 'value' : rawData[key]});
    }
}

Untuk contoh kedua, saya ingin mengulang setiap atribut objek saya, names, dan values. Kode saya mungkin terlihat seperti ini:

var i;
var data = [];

for(i = 0; i < rawData.names.length; i++){
    data.push({'name' : rawData.names[i], 'value' : rawData.values[i]});
}

Kedua hal ini akan menghasilkan versi data-fied dari JSON asli saya yang kemudian dapat saya gunakan di d3.


7
2018-02-27 21:41



Untuk D3js  v2 atau v3 (tidak yakin yang mana).

Deklarasikan kumpulan data Anda

var dataset = { 
    "first-name": "Stack",
    "last-name": "Overflow",
}; // JSON object
var dataset = [ 5, 10, 15, 20, 25 ]; // or array

Sebagai dinyatakan oleh dokter, Anda dapat menggunakan:

larik angka atau objek, atau fungsi yang mengembalikan larik nilai

Ikat itu

d3.select("body").selectAll("p")
    .data(dataset)
    .enter()
    .append("p")
    .text("New paragraph!");

Penjelasan lebih lanjut di Tutorial # pengikatan data D3 dari Scott Murray.

Fungsi data () berlaku untuk pemilihan, informasi lebih lanjut dapat ditemukan dalam dokumentasi resmi: selection.data ([values ​​[, key]]).


5
2018-04-02 13:03



Anda dapat mengubah json menjadi file javascript yang memberikan data ke nilai global. Pengambilan https://bl.ocks.org/d3noob/5028304 sebagai contoh:

Dari:

<script>
.....
// load the data
d3.json("sankeygreenhouse.json", function(error, graph) {

    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });

Untuk:

<script src="graphData.js"></script>
<script>
.....
    var nodeMap = {};
    graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });

Perhatikan bahwa kami telah menghapus kebutuhan untuk panggilan balik.

File json adalah "sankeygreenhouse.json":

{
"links": [
  {"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},

Sekarang, di "graphData.js":

var graph = {
   "links": [
      {"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},

1
2017-12-16 15:09



Cukup ubah data ke array objek seperti ini:

let data = [{"apples":53245,"oranges":200},{"apples":28479,"oranges":200},{"apples":19697,"oranges":200},{"apples":24037,"oranges":200},{"apples":40245,"oranges":200}]

dan komentar d3.tsv("data.tsv", function(error, data) {...


0
2018-06-27 17:41



Mengapa tidak mengubah json Anda ke tsv seperti yang dijelaskan oleh Rob sini?

d3 mengharapkan data atau, dengan kata lain, membutuhkan data dalam format tertentu: tsv. Cara termudah untuk menyelesaikan masalah Anda hanyalah memformat data Anda dari json ke tsv, yang dapat dilakukan dengan mudah menggunakan komentar Rob.


-1
2018-03-21 12:08