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

我不断收到错误“未定义数据”我在此处附加了我的 csv 文件

我在这部分不断收到错误，我不知道该怎么做。我会喜欢任何反馈

4

2 回答 2

0

您的代码有两个主要问题。

  1. 代码的可视化部分需要在带有数据的功能块中（正如另一个答案所指出的）
  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/

于 2019-10-28T14:52:35.763 回答
0

数据加载只会在回调函数内完成。因此，您应该只在加载该数据后尝试对其进行处理。

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!
});
于 2019-10-24T01:32:23.493 回答