D3.JS 树状图加载到 CSV
<!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
数据加载只会在回调函数内完成。所以你应该只在加载数据后尝试对它做一些事情。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
您的代码有两个主要问题。代码的可视化部分需要在带有数据的功能块中（如另一个答案所指出的）您的数据不是真实数字，因为您有“$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/
随时随地看视频慕课网APP
相关分类
JavaScript