Question

我试图在我的csv文件中绘制数据圆圈，但圆圈没有出现在svg画布上。我认为问题源于我如何加载数据（它作为一个对象数组加载），但我不太清楚如何弄清楚下一步该做什么。

基于本教程：https://www.dashingd3js.com/svg-text-element

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

Answer 1

您应该在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(而不是设置KCComment。

这是一个包含工作代码的人：http://embed.plnkr.co/fzBX0o/preview

您现在可以看到许多其他问题：两个圆圈都重叠，只有四分之一可见。这是因为您的pscoreResult和cx值用于定义圈子＆＃39; cy和{{1}}太小了。尝试将它们相乘以使圆圈向右和向下移动并且更加明显！文本位置也是如此，但我会留下这些问题给你解决

根据csv数据绘制svg圆圈

1 个答案: