Question

我试图为课程制作气泡图，但不知何故它根本不起作用，我一次又一次检查代码，无法找到问题所在。它

<!DOCTYPE html>
<html>
<head>
<title>bubble</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>

</body>
<script type="text/javascript">
var diameter = 500, //max size of the bubbles
color = d3.scale.category20b(); //color category

var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);

var svg = d3.select("body")
.append("svg")
.attr("width", diameter)
.attr("height", diameter)
.attr("class", "bubble");

d3.csv("fruit.csv", function(error, data){

//convert numerical values from strings to numbers
data = data.map(function(d){ d.value = +d["Amount"]; return d; });

//bubbles needs very specific format, convert data to this.
var nodes = bubble.nodes({children:data}).filter(function(d) { return     !d.children; });

//setup the chart
var bubbles = svg.append("g")
    .attr("transform", "translate(0,0)")
    .selectAll(".bubble")
    .data(nodes)
    .enter();

//create the bubbles
bubbles.append("circle")
    .attr("r", function(d){ return d.r; })
    .attr("cx", function(d){ return d.x; })
    .attr("cy", function(d){ return d.y; })
    .style("fill", function(d) { return color(d.value); });

//format the text for each bubble
bubbles.append("text")
    .attr("x", function(d){ return d.x; })
    .attr("y", function(d){ return d.y + 5; })
    .attr("text-anchor", "middle")
    .text(function(d){ return d["Fruit"]; })
    .style({
        "fill":"white", 
        "font-family":"Helvetica Neue, Helvetica, Arial, san-serif",
        "font-size": "12px"
    });
})
</script>
</html>

这是我使用的数据文件，文件名是fruit.csv。我确实逐行检查了一切，找不到任何错误

Fruit,Amount
Apple,32
Orange,89
Banana,15

气泡图d3不起作用

0 个答案: