以 CSV 格式加载 D3.JS 树图答案

【问题标题】：D3.JS Tree Map Loading in CSV以 CSV 格式加载 D3.JS 树图
【发布时间】：2020-02-20 07:04:50
【问题描述】：

<!DOCTYPE html>
<meta charset="utf-8">

<!-- load D3js -->
<script src="https://d3js.org/d3.v3.js"></script>

<!-- load D3plus after D3js -->
<script src="https://d3plus.org/js/d3plus.js"></script>

<!-- create container element for visualization -->
<div id="viz"></div>

<script>
  // sample data array
  d3.csv("DataVis.csv", function(data){
    console.log(data);
});
  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")  // container DIV to hold the visualization
    .data(data)  // data to use with the visualization
    .type("tree_map")   // visualization type
    .id("Name")         // key for which our data is unique on
    .size("Amount Spent")      // sizing of blocks
    .draw()             // finally, draw the visualization!
</script>

我不断收到错误“数据未定义”I attached my csv file here

我在这部分不断收到错误，我不知道该怎么办。我希望得到任何反馈

【问题讨论】：

标签： javascript html d3.js d3plus

【解决方案1】：

数据加载只会在回调函数中完成。所以你应该只在加载后尝试对这些数据做一些事情。

d3.csv("DataVis.csv", function(data){
  console.log(data);
  // instantiate d3plus
  var visualization = d3plus.viz()
    .container("#viz")  // container DIV to hold the visualization
    .data(data)  // data to use with the visualization
    .type("tree_map")   // visualization type
    .id("Name")         // key for which our data is unique on
    .size("Amount Spent")      // sizing of blocks
    .draw()             // finally, draw the visualization!
});

【讨论】：

我会调查您的数据加载 d3.csv("DataVis.csv") 是否确实有效。看看你是否能看到网络请求发生了什么（如果你不知道怎么做，请查看 chrome devtools 网络请求）
我认为这不是问题所在。正如我在回答中指出的那样，问题似乎更多地在于他的 CSV 文件的格式以及花费的金额如何输入为 $ 金额。

【解决方案2】：

您的代码存在两个主要问题。

代码的可视化部分需要与数据在功能块中（正如另一个答案所指出的）
您的数据不是真实数字，因为您的“已用金额”数字格式为“$8,200,000.00”。 Javascript 不会将其读取为数字，而是将其读取为字符串。这就是您收到错误 [D3 plus] no data available 的原因。要解决这个问题，您需要进行“类型转换”，即将字符串转换为数字类型。

要解决这个问题，你需要一个 forEach 循环来进行类型转换，例如：

data.forEach(function(d) {
   d["Amount Spent"] = +d["Amount Spent"].trim().replace(/\$/g, "").replace(/\,/g, "");
});

在哪里，

.trim() 函数删除文本之前/之后的任何多余空格

.replace(/\$/g, "") 删除任何 $ 符号

.replace(/\,/g, ""); 删除所有逗号

这是一个数据量有限的工作示例块：https://bl.ocks.org/akulmehta/4ae4564a66c0869c1d9065cd8e73a586/

【讨论】：