Установка кода d3.js для указания на .csv вместо #csv?

Я пытаюсь создать динамический отчет с использованием d3.js, и в настоящее время я ищу источник данных из CSV-файла. Тем не менее, пример я использую использует "#csv" из статического списка CSV:Установка кода d3.js для указания на .csv вместо #csv?

var parsedCSV = d3.csv.parse(d3.select("#csv").text());

"#csv" является статическим кодом, написанным над ним в .html следующим образом:

<pre id="csv">col a, col b, col c 
0,0,0 
30,30,30 
70,70,70 
0,30,70 
70,30,0</pre>

Я хочу, чтобы заменить "#csv" с myCSVfile.csv, который является сообщением .csv, сгенерированным каждый час для моего отчета (который является панелью веб-страниц). Файл myCSVfile.csv будет сидеть рядом с этим файлом index.html в среде IIS при его развертывании.

Вот остальная часть кода, который я использую для концепции. Кредиты Gerado Фуртадо за то, что очень полезно в этом примере:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     pre { 
    display: none; 
} 

table { 
    border-collapse: collapse; 
} 

table, th, td { 
    border: 1px solid black; 
} 

td,th { 
    padding: 10px; 
} 
    </style> 
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script> 
    </head> 
<body> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
<pre id="csv">foo,bar,baz 
32,55,67 
12,34,99 
11,21,32 
11,65,76 
99,14,23</pre> 
    <script type="text/javascript"> 
     var parsedCSV = d3.csv.parse(d3.select("#csv").text()); 

    var colorScale = d3.scale.threshold() 
     .domain([30, 70]) 
     .range(["red", "yellow", "green"]); 

    var body = d3.select("body"); 
    var headers = Object.keys(parsedCSV[0]); 

    var table = body.append('table') 
    var thead = table.append('thead') 
    var tbody = table.append('tbody'); 

    var head = thead.selectAll('th') 
     .data(headers) 
     .enter() 
     .append('th') 
     .text(function(d) { 
      return d; 
     }); 

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

    var cells = rows.selectAll('td') 
     .data(function(d) { 
      return Object.values(d); 
     }) 
     .enter() 
     .append('td') 
     .style("background-color", function(d) { 
      return colorScale(d); 
     }) 
     .text(function(d) { 
      return d; 
     }); 
    </script> 
</body> 
</html>

При попытке переключить #csv в мой фактический файл .csv, ничего не происходит. У меня возникли проблемы с идентификацией ошибки.

источник

2017-01-04 Lasagna Cat

Поэтому я использовал <pre> элемент (в my answer на ваш последний вопрос) для хранения данных и d3.csvParse (или d3.csv.parse в v3), чтобы прочитать это просто: я люблю использовать С.О. snippet, чтобы показать демонстрации, но в отличие от Plunker, я не могу сохранить CSV-файл в фрагменте. Если бы я дал вам неправильное впечатление, что это хорошая практика, я извиняюсь: это не так.

Это указано, что для использования d3.csv вам необходимо передать URL-адрес вашего файла и обратный вызов. Таким образом, в вашем случае, это было бы:

d3.csv("myCSVfile.csv", function(parsedCSV){ 
    //your whole code here, from 'var colorScale' to 'var cells' 
});

Пожалуйста, обратите внимание, что, используя «myCSVfile.csv», скрипт будет искать CSV в той же директории. Если каталог файла отличается, измените путь соответствующим образом.

источник

2017-01-05 01:09:06

Еще раз спасибо за вашу помощь Херардо, я смог использовать код, который вы мне предоставили, чтобы принять мой источник данных .csv :) И да, вы абсолютно правы, материально-техническое содержание пути понимается полностью. –

Установка кода d3.js для указания на .csv вместо #csv?

ответ

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