2015-08-26 2 views
0
var tabulate = function(data, columns) { 
    var table = d3.select('body').append('table') 
    var thead = table.append('thead') 
    var tbody = table.append('tbody') 

    thead.append('tr') 
     .selectAll('th') 
     .data(columns) 
     .enter() 
     .append('th') 
     .text(function(d) { 
      return d 
     }) 

    var rows = tbody.selectAll('tr') 
     .data(data) 
     .enter() 
     .append('tr') 

    var cells = rows.selectAll('td') 
     .data(function(row) { 
      return columns.map(function(column) { 
       return { 
        column: column, 
        value: row[column] 
       } 
      }) 
     }) 
     .enter() 
     .append('td') 
     .text(function(d) { 
      return d.value 
     }) 

    return table; 
} 
var columns = ['Client', 'Count', 'Count']; 

d3.csv('test.csv', function(data) { 

    //console.log(data[3]); 
    tabulate(data, columns) 
}) 

Текст в моем test.csv являетсячтение JSON данные в d3 JS

Клиентом, граф Flipkart, 809285 амазонки, 491189 snapdeal, 469133 Myntra, 182708

что мне нужно для чтения данных из json. Я получаю от ответа при создании ajax-звонка json, который я получаю, является

[ 
    { 
     Client:"amazon", 
     Count:"491189" 
    }, 
    { 
     Client:"flipkart", 
     Count:"809285" 
    }, 
    { 
     Client:"snapdeal", 
     Count:"469133" 
    }, 
    { 
     Client:"myntra", 
     Count:"182708" 
    } 
]; 

Я хочу показать json в табличном формате !!!

+0

И в чем ваш вопрос? – altocumulus

+0

Я хочу, чтобы мои данные были в формате .json в табличном формате, в документе для d3.js он упоминается в внешнем файле .csv, но я хочу, чтобы это было сделано с использованием внутренней javascript javas-переменной. –

+0

Я все еще не уверен, что вы после. Если вы запрашиваете JSON вместо CSV, вы можете использовать ['d3.json()'] (https://github.com/mbostock/d3/wiki/Requests#d3_json) для обработки данных. При использовании этих методов удобства помните, что обратный вызов вызывается с ** двумя ** параметрами: первый из них является ошибкой, если таковой имеется, и второй ваш ответ JSON. Для ваших целей обратный вызов должен быть похож на 'd3.json (« путь/to/file.json », function (error, json) {' – altocumulus

ответ

0

D3 использует свой XHR module для выдачи асинхронного запроса на получение данных. Тем не менее, во многих случаях вы сами не используете d3.xhr, но один из convenience methods, чтобы сделать вашу жизнь более легкой.

Если вы запрашиваете JSON вместо CSV, вы можете использовать d3.json(url[, callback]) для обработки данных. При использовании этих методов удобства помните, что обратный вызов вызывается с двумя параметрами: первый из них является ошибкой, если таковой имеется, и второй ваш ответ JSON. Для ваших целей вы можете получить что-то вроде этого:

d3.json('test.json', function(error, data) { 
    //console.log(data[3]); 
    tabulate(data, columns) 
}); 
0

Пример ниже - это другой подход, но он хорошо работает. Вы должны обернуть «Клиент» и «Граф» в кавычки BTW.

d3.select('body').append('table') 

d3.json('data.js', function (data) { 

    for (var i = 0; i < data.length; i++) { 

     var firstitem = data[i].Client; 
     var seconditem = data[i].Count; 

     d3.select('table').append('tr') 
      .html('<td>' + firstitem + '</td>' + '<td>' + seconditem + '</td>') 
    } 
}); 

Вот data.js ...

[ { "Клиент": "амазонка", "Граф": "491189" }, { "Клиент": " Flipkart», "граф": "809285" }, { "Клиент": "snapdeal", "граф": "469133" }, { "Клиент": "Myntra", "Count": "182708" } ]

Смежные вопросы