d3从csv中绘制多边形

Question

我的数据如下所示，并包含在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 dataset=d3.nest()
    .key(function(d) {return d.id;})
    .sortKeys(d3.ascending)
    .entries(dataset);

在这样做之后，我正在尝试以下方面：

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

但我不确定a）如何以正确的String格式指定points属性值，以及b）如果这是从文件中绘制每个多边形的正确方法？任何帮助将不胜感激。

Answer 1

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

您可能希望通过在每个数据中包含行号或与您的数据相关的其他操作来确认您在访问点信息时对数据进行排序，即使它当前正常工作也可以确认此依赖项。

Answer 2

你的方法似乎对我来说，你只需要现在提取点坐标。为此，您需要迭代每个键的values，并为每个键获取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");