2016-05-17 4 views
1

Я пытаюсь работать с примером круговой диаграммы на Mike Bostock, однако, когда я пытался преобразовать данные в csv, он не работает, и я не уверен Зачем?используя CSV вместо данных TSV в d3.js

Вот код plnk и оскорбительный;

http://plnkr.co/edit/C0bJ0gM1Q9gIGxVe0vyF?p=preview

d3.csv("data.csv", type, function(error, data) { 
    if (error) throw error; 

    var path = svg.datum(data).selectAll("path") 
    .data(pie) 
    .enter().append("path") 
    .attr("fill", function(d, i) { 
     return color(i); 
    }) 
    .attr("d", arc) 
    .each(function(d) { 
     this._current = d; 
    }); // store the initial angles 

    d3.selectAll("input") 
    .on("change", change); 

    var update = function() { 
    d3.select("input[value=\"oranges\"]").property("checked", true).each(change); 
    }; 

    function change() { 
    var value = this.value; 
    clearTimeout(update); 
    pie.value(function(d) { 
     return d[value]; 
    }); // change the value function 
    path = path.data(pie); // compute the new angles 
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs 
    } 
}); 

function type(d) { 
    return { 
     apples: d.apples, 
    oranges: d.oranges 
    }; 
} 

// Store the displayed angles in _current. 
// Then, interpolate from _current to the new angles. 
// During the transition, _current is updated in-place by d3.interpolate. 
function arcTween(a) { 
    var i = d3.interpolate(this._current, a); 
    this._current = i(0); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

Кроме того, как вы можете догадаться, я новичок в d3. Мне было интересно, что было бы более эффективным, используя необработанные данные csv из файла excel или преобразовывая его в JSON и анализируя данные до d3 таким образом? (Я знаю, что это субъективно, просто надеясь достичь нескольких мнений, это не важно в связи с проблемой кодирования).

Спасибо за ваше время

+0

Я предпочитаю JSON, легче читать, и я думаю, что это может быть быстрее, возможно ..... Что касается преобразования, то почему вы пытаетесь преобразовать в CSV? – thatOneGuy

+0

Я также предпочитаю JSON. Я могу построить JSON в соответствии с созданным мной dataviz, это более удобно, но требует больше работы. –

ответ

4

Вы вид не работает в качестве CSV неправильно.

CSV: Comma Отдельные значения, без пробелов.

Где находится ваш CSV, у вас есть пробелы после каждой запятой. Таким образом, все значения яблок работают нормально, поскольку у них нет пробелов, но не работает, когда дело доходит до апельсинов, так как для начинающих он читает 'oranges' как ' oranges' (обратите внимание на пробел), и все значения также имеют пробел.

Изменение этого он будет работать нормально:

apples,oranges 
53277,200 
28479,200 
19697,200 
24037,200 
40245,200 

http://plnkr.co/edit/P3loEGu4jMRpsvTOgCMM?p=preview

Что касается того, что тип данных для использования увидеть этот пример: What are the relative merits of CSV, JSON and XML for a REST API?

Второй ответ имеет хорошее сравнение нескольких типы данных, например, CSV, JSON, XML.

Вот отрывок:

Преимущества:

XML - Много библиотек, Devs знакомы с ним, XSLT, может быть easiily подкрепленная клиента и сервера (XSD, DTD) , Иерархическая данных

JSON - легко интерпретировать на стороне клиента, компактной записи, иерархические данные

CSV - Открыть в Excel

Недостатки (?):

XML - раздутый, труднее интерпретировать в JavaScript, чем JSON

JSON - При неправильном использовании может создать брешь в системе безопасности (не используйте Eval), Не все языки имеют библиотеки для его интерпретации.

CSV - Не поддерживает иерархические данные, вы бы только один делает это, на самом деле это намного сложнее, чем большинство дэвов думают разобрать действительный CSV файлов (значения CSV могут содержать новые линии, пока они находятся между цитаты и т. Д.).

+1

Хорошо спасибо за решение + хороший совет! :) – since095

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