Почему ничего не отображается на моей веб-странице?

Следующий мой код. Но когда я его запускаю, я получаю пустую страницу. Почему это так ? Также как я могу использовать данные из сотен столбцов, чтобы сделать простой интерактивный просмотр с помощью d3? Я хотел бы добавить, что следующий файл csv «LoanStats3a.csv» находится в одной папке.Почему ничего не отображается на моей веб-странице?

<html> 
    <title>Loans</title> 
<link href="../css/jquery-ui.css" rel="stylesheet" /> 
<script src="../Scripts/jquery-1.12.4"></script> 
<script src="../Scripts/jquery-1.12.4.js"></script> 
<script src="../Scripts/jquery-ui.js"></script> 
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script> 
    <style> 
     #LoanStats3a{ 
      color: blueviolet; 
     } 
     </style> 
<body> 
    <script> 
     d3.csv("LoanStats3a", function (file1){ 
      var bg = d3.select("body").append("svg") 
        .attr("width", 5000) 
        .attr("height", 5000); 

     bg.selectAll("rect") 
        .data(file1) 
        .enter() 
        .attr("width", function(d){return d.loan_amnt/100;}) 
        .attr("height", function(d) {return d.term;}) 
        .attr("y", function (d,i) {return i *50;}) 
        .attr("fill", function (d){"red","blue";}); 
    } 
    </script> 
</body>

источник

2016-06-11 Yousuf Farhan

В вашем html-коде ничего нет, т. Е. В теге body, в котором HTML-разметка –

В html-коде ничего не появилось на веб-сайте, как упоминалось выше, и файлы, на которые ссылаются ссылки и теги скриптов ссылаются на локальный файл обратно в каталог, поэтому, если у вас нет этих файлов на вашем компьютере или вы загрузили этот файл на веб-сайт, который возвращается в эти каталоги, эти файлы не будут загружаться. – ajc2000

Неужели d3 должен добавить это? –

Это происходит потому, что после связывания данных на пустой выбор , вы должны выбрать append для каждого элемента.

Кроме того, ваш атрибут «заполнить» неверен.

bg.selectAll("rect") 
    .data(file1) 
    .enter() 
    .append("rect") // <= You need to create a rect for each data 
    .attr("width", function(d){return d.loan_amnt/100;}) 
    .attr("height", function(d) {return d.term;}) 
    .attr("y", function (d,i) {return i *50;}) 
    .attr("fill", "blue");

Если вы хотите изменить цвет в зависимости от данных, создать функцию и return что-то.

// For example 
.attr("fill", function(d){return d.loan_amnt > 25000 ? "blue" : "red"});

Вот JsFiddle случайными данными: DEMO

EDIT: Если он по-прежнему не работает, это, вероятно, проблема с вашими данными, потому что единственное, что отличается от нашего кода, который я использовал пользовательские данные в JsFiddle.

Я заметил, что ваш файл csv не имеет расширения .csv, это всего лишь LoanStats3a?
Вы должны сделать console.log(file1), чтобы проверить, верны ли ваши данные.

Посмотрите на D3 CSV, как загрузить файл csv.

источник

2016-06-11 20:52:54

Возможно, возникла проблема с вашими данными. См. Мое редактирование. –

Я решил проблему. Спасибо, что ответили! –

Вы пропускаете закрытие ) в конце:

 .attr("fill", function (d){"red","blue";}); 
    } 
//^Here should be a) 
</script>

Это помогает, если у вас есть надлежащий отступ:

<script> 
d3.csv("LoanStats3a", function(file1) { 
    var bg = d3.select("body").append("svg") 
     .attr("width", 5000) 
     .attr("height", 5000); 

    bg.selectAll("rect") 
     .data(file1) 
     .enter() 
     .attr("width", function(d) { 
      return d.loan_amnt/100; 
     }) 
     .attr("height", function(d) { 
      return d.term; 
     }) 
     .attr("y", function(d, i) { 
      return i * 50; 
     }) 
     .attr("fill", function(d) { 
      "red", "blue"; // What is going on here? 
          // Did you for to return? 
          // return "blue"; 
     }); 
}); 
</script>

источник

2016-06-11 19:38:18 andlrc

Спасибо за ваш ответ! Я исправил это, но у меня такая же проблема. –

Почему ничего не отображается на моей веб-странице?

ответ

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