（带有D3的Javascript）来自CSV文件的数据仅使用一次，并且第二次返回undefined或NaN

Question

I'm trying to use data to create a bubble chart based on this code by Mike Bostock and have been trying to simplify it both so I can understand it better and so I can build upon it for my own purposes later. 我正在尝试使用数据根据Mike Bostock的这段代码创建一个气泡图，并且一直在试图简化它们，以便我可以更好地理解它，以便以后为自己的目的而构建。

At this time, it correctly displays all the bubbles with sizes based on the data, but it doesn't display the correct data in the circles, nor does it show that same data in the labels when hovering the mouse over the circles. 这时，它会根据数据正确显示所有大小不一的气泡，但是在圆中没有显示正确的数据，也不会在将鼠标悬停在圆上时在标签中显示相同的数据。

From what I can see it seems like the code changes the data when used the first time so I tried to get around it by reading from the file again, but while it seems to be getting the data from the file it just returns Animal entries as "undefined" and the numbers in "First" as NaN. 从我看到的结果来看，代码似乎在第一次使用时就更改了数据，因此我尝试通过再次从文件中读取来解决它，但是尽管它似乎正在从文件中获取数据，但它只是将Animal条目返回为“未定义”，“第一”中的数字为NaN。 What do I have to do to get the labels to display correctly? 我该怎么做才能使标签正确显示？

The code: 编码：

<!DOCTYPE html>
<svg width="1200" height="500" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var format = d3.format(",d");

var color = d3.scaleOrdinal(d3.schemeCategory20c);

var pack = d3.pack()
    .size([width, height])
    .padding(10);

d3.csv("animalcount.csv", function(d) {
    d.First = +d.First;
    if (d.First) return d;
    if (d.Animal) return d;
}, function(error, animal) {
  if (error) throw error;

    var root = d3.hierarchy({ children: animal })

        .sum(function (d) {
            console.log(+d.First);
            return +d.First;
        })
      ;

  var node = svg.selectAll(".node")
    .data(pack(root).leaves())
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("circle")
        .attr("r", function (d) { return d.r; })
        .style("fill", function (d) { return color(d.package); });

    node.append("title")
        .text(d3.csv("animalcount.csv", function (d) {
            d.First = +d.First;

            console.log(+d.First);
            return d.Animal + "\n" + format(+d.Frist);
        }));

    node.append("text")
        .selectAll("tspan")
        .data(function (d) { return d.Animal + "\n" + format(+d.First); })
        .enter().append("tspan")
        .style("fill", "black")
        .style("font-size","11px")
        .style("z-index", "500")
        .text(function (d) { return d; });
});

</script>

The CSV file data: CSV文件数据：

Animal  First   Second  Third   Fourth  Fifth   Sixth   Seventh Eighth  Nineth  Tenth
Dog 17  7   6   5   4   3   2   2   1   1
Cat 5   4   3   2   1   1   1   1   1   1
Unicorn 3   3   3   3   3   3   3   2   2   2
Guinea-pig  5   3   2   2   1   1               
Seagull 16  11  9   6   6   4   4   3   3   2
Albatross   5   5   5   5   5   5   3   3   3   3
Deer    2   2   2   2   2   2   2   2   2   2
Elk 3   3   3   3   3   3   3   3   3   3
Salmon  8   7   7   7   7   6   5   4   4   4
Shark   16  16  15  14  12  10  8   3   3   3

Thanks a bunch in advance! 提前谢谢一堆！

Answer 1

If you show file content don't copy it from the application using that file but use a plain text editor to copy from. 如果显示文件内容，请不要使用该文件从应用程序中复制文件内容，而应使用纯文本编辑器进行复制。

I have added commas to your file and adjusted the code. 我已在您的文件中添加了逗号并调整了代码。

There is absolutely no need to read the csv again. 绝对没有必要再次读取csv。 All data is already there. 所有数据已经在那里。 Use the Developer Tools to inspect the data provided in the lambda functions. 使用开发人员工具检查lambda函数中提供的数据。 No need to keep using +d.First , and d.Frist does not exist. 无需继续使用+d.First ，并且d.Frist不存在。

Also have a close look at the use of tspan in the bl.ocks example and in your code. 还可以在bl.ocks示例和代码中仔细查看tspan的用法。

<!DOCTYPE html>

<svg width="1200" height="500" font-family="sans-serif" font-size="10" text-anchor="middle"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var format = d3.format(",d");

var color = d3.scaleOrdinal(d3.schemeCategory20c);

var pack = d3.pack()
    .size([width, height])
    .padding(10);

d3.csv("animalcount.csv", function(d) {
    d.First = +d.First;
    return d;
}, function(error, animal) {
  if (error) throw error;

    var root = d3.hierarchy({ children: animal })
        .sum(function (d) {return d.First;})
      ;

  var node = svg.selectAll(".node")
    .data(pack(root).leaves())
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });

    node.append("circle")
        .attr("r", function (d) { return d.r; })
        .style("fill", function (d) { return color(d.package); });

    node.append("title")
        .text(function (d) { return d.data.Animal + "\n" + format(d.data.First); });

    node.append("text")
        .selectAll("tspan")
        .data(function (d) { return d.data.Animal + "\n" + format(d.data.First); })
        .enter().append("tspan")
        .style("fill", "black")
        .style("font-size","11px")
        .style("z-index", "500")
        .text(function (d) { return d; });
});

</script>

（带有D3的Javascript）来自CSV文件的数据仅使用一次，并且第二次返回undefined或NaN

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-08-03 10:15:53

（带有D3的Javascript）来自CSV文件的数据仅使用一次，并且第二次返回undefined或NaN

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-08-03 10:15:53

解决方案1
0 已采纳 2018-08-03 10:15:53