Question

我有一个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中显示每行的日期，所以如果我的CSV文件中有6行，我想在处理我的CSV后有6个SVG。

这就是我在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？

Answer 1

我从未使用过PHP，所以下面的答案是基于你可以将$ data var变成对象数组的假设：

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

然后，您可以执行以下操作，使用预先填充数据的模板填充HTML。

＆＃13;

// 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)
}())

＆＃13;

<div id="container">
</div>

＆＃13;

在SVG中处理的CSV数据

1 个答案: