使用一个函数设置d3多个属性

Question

大家好，我有一个关于SVG线的示例对象如下

{
  _id: 5,
  coordinates:{
       x1: 100,
       y1: 100,
       x2: 500,
       y2: 500,
 }

假设我有一个变量 data，其中包含这些对象的数组。 我想在一个 attr() 调用中设置所有相关行属性。 我知道可以将对象作为属性传递，然后 d3 将设置所有属性。 由于我有一个对象数组，所以我创建了一个返回该对象的函数：

let objectsRender = svg.selectAll("line")
                       .data(data)
                       .enter()
                       .append("line")
                       .attr(function(d)      { return d.coordinates;})
                       .attr("id", function(d){ return prefix +d._id;});

但它似乎不起作用，因为没有设置x或y值。 有人能给我解决问题的方法吗？

- Anh Tuan Nguyen

---

这是属性 x1，y1，x2，y2。 - Anh Tuan Nguyen

可能是重复的问题：如何使用一个值函数设置多个属性？ - brichins

Answer 1

抱歉，你无法在一行中完成此操作，你必须执行以下操作：

.attr({
    x1: function (d) { return d.coordinates.x1; },
    x2: function (d) { return d.coordinates.x2; },
    y1:  function (d) { return d.coordinates.y1; },
    y2:  function (d) { return d.coordinates.y2; }
  });

- Tim B