Javascript 在CSV中加载D3.JS树映射 //样本数据数组 d3.csv（“DataVis.csv”，函数（数据）{ 控制台日志（数据）； }); //实例化d3plus var可视化=d3plus.viz（） .container（“#viz”）//保存可视化的container DIV .data（data）//用于可视化的数据 .type（“树映射”）//可视化类型 .id（“Name”）//我们的数据在其上唯一的密钥 .尺寸（“花费金额”）//砌块尺寸 .draw（）//最后，绘制可视化！_Javascript_Html_D3.js_D3plus

Javascript 在CSV中加载D3.JS树映射 //样本数据数组 d3.csv（“DataVis.csv”，函数（数据）{ 控制台日志（数据）； }); //实例化d3plus var可视化=d3plus.viz（） .container（“#viz”）//保存可视化的container DIV .data（data）//用于可视化的数据 .type（“树映射”）//可视化类型 .id（“Name”）//我们的数据在其上唯一的密钥 .尺寸（“花费金额”）//砌块尺寸 .draw（）//最后，绘制可视化！

javascript html d3.js

Javascript 在CSV中加载D3.JS树映射 //样本数据数组 d3.csv（“DataVis.csv”，函数（数据）{ 控制台日志（数据）； }); //实例化d3plus var可视化=d3plus.viz（） .container（“#viz”）//保存可视化的container DIV .data（data）//用于可视化的数据 .type（“树映射”）//可视化类型 .id（“Name”）//我们的数据在其上唯一的密钥 .尺寸（“花费金额”）//砌块尺寸 .draw（）//最后，绘制可视化！,javascript,html,d3.js,d3plus,Javascript,Html,D3.js,D3plus,我一直收到错误“数据未定义” 我一直在这方面出错，我不知道该怎么办。我希望任何反馈数据加载只在回调函数中完成。因此，您应该仅在加载数据后尝试对其执行某些操作 <!DOCTYPE html> <meta charset="utf-8">  <script src="https://d3js.org/d3.v3.js"></script> <!-- load D3plus after D3js

我一直收到错误“数据未定义”

我一直在这方面出错，我不知道该怎么办。我希望任何反馈

数据加载只在回调函数中完成。因此，您应该仅在加载数据后尝试对其执行某些操作

<!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>

您的代码有两个主要问题

代码的可视化部分需要与数据一起位于功能块中（正如另一个答案所指出的）

您的数据不是真实数字，因为您的花费金额的数字格式为“$8200000.00”。Javascript不会将其读取为一个数字，而是一个字符串。这就是您得到错误[D3 plus]的原因，因为没有可用的数据。要纠正这一点，您需要进行“类型转换”，即从字符串转换为数字类型

要解决此问题，您需要一个forEach循环，该循环执行以下类型转换：

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!
});

在哪里,

.trim（）

函数删除文本前后的任何额外空格

.replace（/\$/g，”）

删除任何$符号

.replace（/\，/g，”）删除任何逗号
下面是一个具有有限数据量的工作示例的块：
我将研究您的数据加载d3.csv（“DataVis.csv”）是否实际工作。看看你是否能看到网络请求发生了什么（如果你不知道怎么做，请查阅chrome devtools网络请求），我认为这不是问题所在。正如我在回答中指出的，问题似乎更多地在于他的CSV文件的格式，以及如何将花费的金额键入$amounts。
data.forEach(function(d) {
   d["Amount Spent"] = +d["Amount Spent"].trim().replace(/\$/g, "").replace(/\,/g, "");
});