.csv 绑定到 d3.js 麻烦

Question

从 d3.js 开始的新人，来自 PHP/python，但我的 JS 知识非常薄弱。我正在尝试将 X/Y 位置绑定到散点图，但我不断收到错误

错误：属性 d="MNaN,NaN" 的值无效

或

错误：属性 cx="NaN" 的值无效 错误：属性 cy="NaN" 的值无效

我有点不清楚我做错了什么。以下是我的处理方式：简单的 html 页面，除了必要的 html 和脚本（见下文）之外没有其他内容：

    <script>

    var margin = {top: 30, right: 20, bottom: 30, left: 50},
        width = 600 - margin.left - margin.right,
        height = 270 - margin.top - margin.bottom;

    var x = d3.scale.linear().range([0, width]);
    var y = d3.scale.linear().range([height, 0]);

    var xAxis = d3.svg.axis().scale(x)
        .orient("bottom").ticks(5);

    var yAxis = d3.svg.axis().scale(y)
        .orient("left").ticks(5);


    var valueline = d3.svg.line()
        .x(function(d) { return x(d.posX); })
        .y(function(d) { return y(d.posY); });


    var svg = d3.select("body")
        .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
        .append("g")
            .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");


    d3.csv("test.php", function(error, data) {
        data.forEach(function(d) {
        d.posX = +d.posX
        d.posY = +d.posY;
    });

x.domain(d3.extent(data, function(d) { return d.posX; }));
y.domain(d3.extent(data, function(d) { return d.posY; }));



svg.append("path")
    .attr("class", "line")
    .attr("d", valueline(data));


svg.selectAll("dot")
    .data(data)
  .enter().append("circle")
    .attr("r", 3.5)
    .attr("cx", function(d) { return x(d.posX); })
    .attr("cy", function(d) { return y(d.posY); });


svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);


svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

});

</script>

“test.php”调用生成 csv 格式数组的 mysql 查询。这是输出的前五行（当他们导航到 localhost/test.php 时会看到什么）：

    "posX","posY"
    -10,50
    20,143
    14,128
    -40,8

等等。有几件事我一定要注意。我打电话给 d3.js；我画了一个轴，只是没有数据。这些错误还引用了调用的 d3 脚本，所以我确信它是有效的。如果那是一种更好的方法，我很高兴切换到 json。这可能真的很明显，但我无法理解。

感谢您的帮助。

编辑：我的 '.csv' 是使用 mysql 数组中的一个简单循环生成的

     echo $posX . "," . $posY . "<br>";

这（尤其是 br）可能是问题所在吗？

Answer 1

是的，我很笨。这是愚蠢的兄弟 我正在调用我的 php 脚本，它破坏了 d3.js，因为它认为 br 是另一个值。

简单的修复。谢谢 Lars Kothhoff。