D3.js d3从csv绘制多边形

我的数据如下所示，包含在csv文件中：

x,y,id
95,100,1
89,92,1
72,107,1
68,114,1
67,121,1
126,41,2
124,43,2
124,46,2
126,47,2
…

每个id标识一个要打印的多边形，

x

，

y

列是各个多边形的点或顶点的位置。到目前为止，我已经完成了基本的绘图，其中数据的组织方式并不复杂。对于这种情况，在进行一些阅读之后，我认为我需要使用

nest

函数按

id

对数据进行分组（以便将每个多边形的所有数据分组在一起）：

在这样做之后，我尝试了以下几点：

var g = d3.select("svg").selectAll("g").data(dataset).enter()
    .append("g")
    .append("polygon")
    .attr("points",function(d) {return ?})
    .style("fill", "brown");

---

但我不确定a）如何以正确的字符串格式指定

点

属性值，b）这是否是从文件中绘制每个多边形的正确方法？非常感谢您的帮助。

您的方法对我来说似乎是正确的，您现在只需要提取点坐标。为此，需要迭代每个键的

值

，对于每个键，获取

x

和

y

var g = d3.select("svg").selectAll("g").data(dataset).enter()
  .append("g")
  .append("polygon")
  .attr("points",function(d) {
    return d.values.map(function(e) { return e.x + "," + e.y; }).join(" ");
  })
  .style("fill", "brown");

---

拉尔斯的建议是正确的，但你也可以考虑你可能没有注意到的不明确的依赖。绘制多边形取决于在原始CSV文件中找到条目的顺序。例如，对于

1

，可以使用两种可能的排列

---

您可能希望明确承认此依赖关系，即使它目前对您来说运行良好，也可以在每个数据中包含行号或与数据相关的其他操作，然后确保在访问点信息时对数据进行排序

很高兴听到我在正确的轨道上。感谢您填写缺失的部分，并向我展示地图功能。

var g = d3.select("svg").selectAll("g").data(dataset).enter()
  .append("g")
  .append("polygon")
  .attr("points",function(d) {
    return d.values.map(function(e) { return e.x + "," + e.y; }).join(" ");
  })
  .style("fill", "brown");