javascript - 我可以在 D3 中一次指定两个属性吗？

Question

我使用两条 attr 线定位我的元素(这里是圆圈，其他地方可能有所不同)。

graph1.selectAll("circle").data(data).enter().append("circle")
  .attr("cx", function(_, i) { return i; })
  .attr("cy", function(d) { return d; })
  .attr("r", "5")
  .attr("class", "dataPoint");

为每个元素指定两个坐标是非常常见的。事实上，我无法想象一个不正常的情况。所以我想知道是否可以同时指定这两个属性，比如这个伪代码。

...
//.attr("cx", function(_, i) { return i; })
//.attr("cy", function(d) { return d; })
.attr("[cx cy]", function(d,i) { return [i,d]; })
...

因为 cx 和 cy 是属性，我假设 CSSing 它们不是一个选项。

Answer 1

您可以使用一个对象来创建输入。

...
//.attr("cx", function(_, i) { return i; })
//.attr("cy", function(d) { return d; })
.attr({'cx':'100','cy':'100'})
...

请注意，如果您使用对象表示法，引号是可选的，但指定类属性除外。在您的情况下，它看起来像这样。

.attr({
  cx: function(_, i) { return i; },
  cy: function(d, _) { return d; }
})

由于您可能会使用缩放方法，所以我不确定它是否提高了可读性 - 也许您应该移出函数声明。

function posX(_, i) { return x(i); }
function posY(d, _) { return y(d); }
graph1.selectAll("circle").data(data).enter().append("circle")
  .attr({ cx: posX, cy: posY })
  .attr("r", "5")
  .attr("class", "dataPoint");