Данные CSV, обработанные в SVG - PullRequest
Новая
       1

Данные CSV, обработанные в SVG

0 голосов
/ 28 апреля 2018

У меня есть файл CSV с некоторыми данными, которые я хочу поместить в SVG. Вот как я читаю мой CSV и отображаю свои данные: 

<HTML>
<HEAD>
   <title>CSV reader</title>
</HEAD>
<BODY>

<?php
$row = 1;
if (($handle = fopen("test.csv", "r")) !== FALSE) {
    while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
        $num = count($data);
        //echo "<p> $num fields in line $row: <br /></p>\n";
        $row++;
        for ($c=0; $c < $num; $c++) {
            echo $data[$c] . "<br />\n";
        }
    }
    fclose($handle);
}
?>

</BODY>
</HTML>

Мой CSV-файл содержит эти данные: 

"name1","age1","phone1"
"name2","age2","phone2"
"name3","age3","phone3"
"name4","age4","phone4"
"name5","age5","phone5"
"name6","age6","phone6"

Я хочу отображать свою дату в каждой строке в отдельном SVG, который я создал, поэтому, если у меня есть 6 строк в моем файле CSV, я хочу иметь 6 SVG после обработки моего CSV.

Вот как я хочу, чтобы мои данные в моем SVG: 

<svg width="500" height="500">
  <rect x="50" y="20" rx="20" ry="20" width="250" height="250" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
     <text x="140" y="70"
      style="font-family: Times New Roman;
             font-size: 30px;
             stroke: #00ff00;
             fill: #0000ff;">
    Person
  </text>
    <text x="70" y="100" style="fill:black;">Name:
    <tspan x="70" y="130">Age: </tspan>
    <tspan x="70" y="160">Phone: </tspan>
  </text>
  Sorry, your browser does not support inline SVG.
</svg>

Как я могу поместить эти строки из моего CSV в SVG?

1 Ответ

0 голосов
/ 29 апреля 2018

Я никогда не работал с PHP, поэтому ответ ниже основан на предположении, что вы можете превратить ваш $ data в массив объектов: 

var data = [
    {
        name: "name1",
        age: "age1",
        phone: "phone1"
    },
    { ... }
]

Затем вы можете сделать что-то подобное ниже, чтобы заполнить ваш HTML шаблонами, предварительно заполненными вашими данными. 

// cache DOM:
var container = document.getElementById('container');

// data source:
var data = [{
    name: "name1",
    age: "age1",
    phone: "phone1"
  },
  {
    name: "name2",
    age: "age2",
    phone: "phone2"
  },
  {
    name: "name3",
    age: "age3",
    phone: "phone3"
  },
  {
    name: "name4",
    age: "age4",
    phone: "phone4"
  },
  {
    name: "name5",
    age: "age5",
    phone: "phone5"
  },
  {
    name: "name6",
    age: "age6",
    phone: "phone6"
  }
]

// function to create a single SVG template based on data:
function createSVGtemplate(name, age, phone) {
  var svgTemplate = '<svg width="500" height="300">' +
    '<rect x="50" y="20" rx="20" ry="20" width="250" height="250" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />' +
    '<text x="140" y="70" style="font-family: Times New Roman;font-size: 30px;stroke: #00ff00;fill: #0000ff;">' + 'Person:</text>' +
    '<text x="70" y="100" style="fill:black;">Name: ' + name + '</text>' +
    '<text x="70" y="130">Age: ' + age + ' </text>' +
    '<text x="70" y="160">Phone: ' + phone + ' </text>' +
    '</svg>';
  return document.createRange().createContextualFragment(svgTemplate)
}

// loop function to create n amount of svg templates:
function createTemplates(data) {
  let documentFragment = document.createDocumentFragment();
  for (let i = 0; i < data.length; i++) {
    let filledTemplate = createSVGtemplate(data[i].name, data[i].age, data[i].phone);
    documentFragment.appendChild(filledTemplate);
  };
  container.appendChild(documentFragment);
}

// init:
(function () {
  createTemplates(data)
}())
<div id="container">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...