Question

我正在尝试复制this D3 visualisation。不幸的是，我正在公司内部网上工作，这阻止了我尝试引用示例中使用的csv文件。

作为一种解决方法，我将CSV数据包含在我的html中，其中包含一些预先格式化的文本标签。例如：

<pre id="csvdata">
account-account-account-account-account-account,22781
account-account-account-account-account-end,3311
account-account-account-account-account-home,906
</pre>

原始示例D3脚本引用CSV文件：

d3.text("visit-sequences.csv", function(text) {
  var csv = d3.csv.parseRows(text);
  var json = buildHierarchy(csv);
  createVisualization(json);
});

我现在正在尝试对此进行调整以使用rawCSV变量而不是"visit-sequences.csv"，但遇到了一些麻烦。下面的尝试导致对象分别不支持属性或方法getElementByID ，然后无效参数错误。

尝试1：

var rawCSV = document.getElementByID("csvdata");
var rawCSVdata = rawCSV.html

 d3.text(rawCSVdata, function(text) {
  var csv = d3.csv.parseRows(text);
  var json = buildHierarchy(csv);
  createVisualization(json);
});

尝试2：

var rawCSV = d3.select("#csvdata").text();

d3.text(rawCSV, function(text) {
var csv = d3.csv.parseRows(text);
var json = buildHierarchy(csv);
createVisualization(json);
});

如何将此CSV数据传递给d3.text函数？我可以传递一个变量来代替“visit-sequences.csv”参考吗？

Answer 1

由于您将HTML作为<pre>包含在HTML中，因此您不需要任何XMLHttpRequest（在这种情况下，d3.text()）：您还没有这样做任何请求rawCSV都不是网址，数据就在<pre>。

所以，它只能是：

＆＃13;

var rawCSV = d3.select("#csvdata").text();
var csv = d3.csv.parseRows(rawCSV);
console.log(csv)

＆＃13;

pre {
  display: none;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<pre id="csvdata">
account-account-account-account-account-account,22781
account-account-account-account-account-end,3311
account-account-account-account-account-home,906
</pre>

＆＃13;

此外，值得一提的是，使用带template literal的变量似乎更清晰：

＆＃13;

var rawCSV = `account-account-account-account-account-account,22781
account-account-account-account-account-end,3311
account-account-account-account-account-home,906`;
var csv = d3.csv.parseRows(rawCSV);
console.log(csv)

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

在HTML中引用CSV数据

1 个答案: