<!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>我一直在这部分出错，我不知道该怎么做。我会喜欢任何反馈
2 回答
慕桂英4014372
TA贡献1871条经验 获得超13个赞
数据加载只会在回调函数内完成。所以你应该只在加载数据后尝试对它做一些事情。
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!
});
慕容708150
TA贡献1831条经验 获得超4个赞
您的代码有两个主要问题。
代码的可视化部分需要在带有数据的功能块中（如另一个答案所指出的）
您的数据不是真实数字，因为您有“$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/
添加回答
举报
0/150
提交
取消