gpt4 book ai didi

csv - 使用 d3.js 从 csv 文件绘制 voronoi 图

转载 作者:行者123 更新时间:2023-12-03 17:54:46 26 4
gpt4 key购买 nike

我想使用 http://mbostock.github.com/d3/ex/voronoi.html 绘制 voronoi 图来自 csv 文件中的一组点。

我修改了代码:

var w = 1200,
h = 800;

d3.text("ReMeRi_4_2_2_0.csv", function(datasetText) {

var vertices = d3.csv.parseRows(datasetText);

var svg = d3.select("#chart")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("class", "BuPu");


svg.selectAll("path")
.data(d3.geom.voronoi(vertices))
.enter().append("path")
.attr("class", function(d, i) { return i ? "q" + (i % 9) + "-9" : null; })
.attr("d", function(d) { return "M" + d.join("L") + "Z"; })

svg.selectAll("circle")
.data(vertices.slice(1))
.enter().append("circle")
.attr("transform", function(d) { return "translate(" + d + ")"; })
.attr("r", 2)

text1 = svg.append("svg:text")
.text("control")
.attr("x", 150)
.attr("y", 200)
.style("stroke", "orange")
.style("stroke-width", 0)
.style("font-size", "80%")
.style("fill", "orange");

});

点绘制正确,但镶嵌的多边形不是。

我试图添加标题行和 csv.parse() 函数但没有成功。一开始我认为解决方案是遍历数组以解析为 float ,但我做不到。如果这就是为什么正确绘制点的原因?。

csv 文件如下所示:
0.0,0.0
116.78032769067718,0.0
193.02842412648215,78.92418723196411
323.01058809711515,54.15210221124609
378.8576448450217,202.5192012545716
...

最佳答案

我认为,正如您所建议的,数字被解析为字符串而不是数字是一个问题。即使这不是破坏它的原因,修复它也会很好。这是一种方法(可能是一种更惯用的方法,不知道):

var vertices = d3.csv.parseRows(
datasetText,
function(pt) { return [parseFloat(pt[0]), parseFloat(pt[1])]; })
);

那可能会解决您的问题。

关于csv - 使用 d3.js 从 csv 文件绘制 voronoi 图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13091506/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com