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");

veeery 通常指定每个元素的两个坐标。事实上，我无法想象一个理智的案例，事实并非如此。所以我想知道是否可以在一个地方指定两个属性，就像这个伪代码一样。

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

由于 cx 和 cy 是属性，我假设CSS不是一个选项。

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");

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

1 个答案: