Javascript 基于csv数据绘制svg圆

我试图根据csv文件中的数据绘制圆圈，但这些圆圈没有出现在svg画布上。我相信问题源于我如何加载数据（它作为一个对象数组加载），但我不太确定下一步该怎么做

根据本教程：

D3.js代码：

        var circleData = d3.csv("files/data.csv", function (error, data) {
            data.forEach(function (d) {
                d['KCComment'] = +d['KCComment'];
                d['pscoreResult'] = +d['pscoreResult'];
                d['r'] = +d['r'];
            });
            console.log(data);
        });

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

        var circles = svg.selectAll("circle")
            .data(circleData)
            .enter()
            .append("circle");

        var circleAttributes = circles
            .attr("cx", function (d) { return d.KCComment; })
            .attr("cy", function (d) { return d.pscoreResult; })
            .attr("r", function (d) { return d.r; })
            .style("fill", "green");

        var text = svg.selectAll("text")
            .data(circleData)
            .enter()
            .append("text");

        var textLabels = text
            .attr("x", function(d) { return d.KCComment; })
            .attr("y", function(d) { return d.pscoreResult; })
            .text(function (d) { return "( " + d.KCComment + ", " + d.pscoreResult + " )"; })
            .attr("font-family", "sans-serif")
            .attr("font-size", "20px")
            .attr("fill", "red");

CSV的外观：

fmname, fmtype, KCComment, pscoreResult, r
test1, type1, 7.1, 8, 39
test2, type2, 1.2, 3, 12

---

您应该在

d3.csv

函数的回调函数中包含圆形绘图代码，因此只有当数据可用时才会对其进行处理

d3.csv("data.csv", function (error, circleData) {
  circleData.forEach(function (d) {
    d['KCComment'] = +d['KCComment'];
    d['pscoreResult'] = +d['pscoreResult'];
    d['r'] = +d['r'];
  });
  console.log(circleData);
  // Do the SVG drawing stuff
  ...
  // Finished
});

还要注意的是，与其设置

var circleData=d3.csv（

），不如在回调函数中定义它

这是一个带有工作代码的plunker：

---

现在，您将能够看到许多进一步的问题：两个圆圈重叠，只有四分之一可见。这是因为用于定义圆圈的

cx

和

cy

的

KCComment

和

pscoreResult

值太小。请尝试将它们相乘，以使圆圈左右移动并保持一致更明显一点！文本位置也是如此，但我将把这些问题留给您来解决，这很有帮助！我还不熟悉使用JavaScript，所以不知道回调是如何工作的。