Отображение SVG на странице HTML - PullRequest
Новая
       5

Отображение SVG на странице HTML

0 голосов
/ 23 мая 2018

Я недавно начал изучать использование D3 js после полезного курса Pluralsight , где репетитор использует jsbin.com для простых демонстраций.

Я следовал дальше, и мой код d3 js работает на jsbin.com ( ссылка на код ), что дает следующий вывод.

enter image description here

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

Вот что у меня есть (точно так же, как код в приведенной выше ссылке)

HTML 

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="javascript.js"></script>
  </head>

  <body>
    <h1>Test Header</h1>
  </body>

</html>

JavaScript: 

//alert("hello");

var w = 500;
var h = 100;
var pad = 2;
var dataset = [5, 10, 15, 20, 25];
var svg =
  d3.select("body")
    .append("svg")
      .attr("width", w)
      .attr("height", h)
      .style("fill", "purple");

svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 20)
    .attr("height", 100)
    .style("fill", "purple");

Результат

enter image description here

Записывает Test Header на страницу, однако изображение SVG не отображается.Кто-нибудь может указать, почему это работает в jsbin, но не при размещении файлов на локальном сервере?

Редактировать: Стоит отметить, что я пытаюсь просмотреть это с помощью простого узла hhtp-сервер, и попытался просмотретьсодержимое в Firefox, Firefox dev & IE11.

1 Ответ

0 голосов
/ 23 мая 2018

Ваш код выполняется до объявления элемента body, что является проблемой, потому что код пытается добавить материал в тело.Если вы переместите тег сценария в конец тела, он должен работать: 

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</script>
  </head>

  <body>
    <h1>Test Header</h1>
    <script type="text/javascript" src="javascript.js">
  </body>
</html>
...