Question

在以下代码中，我从tsv文件中给出了圆的cx和cy值。但是，在控制台中查看代码时，圆圈没有获得cx和cy值。在浏览器中，所有圆圈都聚集在svg的左上角。如何分配cx和cy值？

function makeDemo1() {
    d3.tsv("data/examples-demo1.tsv")
        .then(function(data) {
        d3.select("svg")
            .selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("r", 5)
            .attr("fill", "red")
            .attr("cx", function(d) { return d["x"] })
            .attr("cy", function(d) { return d["y"] });
    });
}

身体

<body onload="makeDemo1()">
    <svg id="demo1" width="500" height="350" style="background: lightgrey">
    </svg>
</body>

tsv文件

Answer 1

当您的圈子结束于左上角时，表示您的数据无法正确读取，并且x和y属性未定义。您确定您的tsv文件是制表符分隔的和仅制表符的吗？当包含空格时，它将不起作用。

一个工作正常的人，我没有更改您的代码，只是确保数据以制表符分隔： https://next.plnkr.co/edit/0YWmLKqkzWJ32w8Z

从TSV文件使用D3绘制圆

1 个答案: