如何从单个数据点在d3.js中创建线/路径/多边形？

Question

这就是我想要做的。我有一组数据项。例如，每个都是格式为{'x' : 3, 'y' : 8,'q' : 5}的字典。我想将这些点的每一个都变成一个多边形（例如，一个以（x，y）为中心的多边形）。

所以我知道我可以做一个函数并将每个项目转换成可以传递给行生成器的数据点列表。但是，我想做的是首先输入/更新该行时绑定数据项列表。这样，当我将来更改数据值时，就不必每次都重新计算多边形。

这就是我尝试过的：

var line_ex = d3.line()
    .x(x_ex(xy_to_arrow(this.x, this.y).map(el => el.x)))
    .y(y_ex(xy_to_arrow(this.x, this.y).map(el => el.y)));

var objs_dat = [];
for (i=0; i<N_objs; i++){
  for (j=0; j<N_objs; j++){
    objs_dat.push({
      x : i,
      y : j,
      q : 1
    })
  }
}

function xy_to_arrow(x, y){
  return [{'x' : x, 'y' : y}, {'x' : 2*x, 'y' : 2*y}];
}

var plot_ex = svg_ex.append("g");

plot_ex.append("path")
    .data(objs_dat)
    .attr("class", "line")
    .attr("fill", "red")
    .attr('d', line_ex);

我希望让xy_to_arrow取每个数据项的x和y点，并将其转换为line_ex可以使用的字典点列表，但它不起作用。

什么是正确的方法？