javascript - 在 D3 中设置多个属性，而无需提前知道它们会是什么

Question

我试图在 d3 中设置多个属性，类似于此答案中所做的操作:https://stackoverflow.com/a/20822552/1112097 ，但我希望能够将一组属性作为数组传递，以便相同的代码可以创建不同的元素。例如，以下数据应创建一个红色正方形和一个绿色圆圈:

var data = [
  {
    name: "Element 1",
    type: “rect”,
    id: “rect01”,
    attributes: [
     {label: “x”, val: 0},
     {label: “y”, val: 0},
     {label: “width”, val: 10},
     {label: “height”, val: 10},
   ],
   styles: [
     {label: “fill”, val: “none”},
     {label: “stroke”, val: “#ff0000”}
   ]
 },
 {
   name: "Element 2", 
   type: “circle”,
   id: “circle01”,
   attributes: [
     {label: “cx”, val: 30},
     {label: “cy”, val: 30},
     {label: “r”, val: 10}
   ],
   styles: [
     {label: “fill”, val: “#00ff00”},
     {label: “stroke”, val: “#0000ff”}
  ]
  }
];

使用如下内容:

var element = svg.selectAll(".element")
        .data(data, function(d) {return d.id;});

var elementEnter = element.enter()
        .append(function (d) {return d.type;})
        .attr("class", "element")
        .attr({
            // what goes here?
        })
        .style({
            // what goes here?
        }):

我可以用什么来代替“这里放什么？”使用数据数组设置属性(例如“x”、“cx”或“r”)和值。

Answer 1

如果您将数据更改为以下格式会更好:

   attributes: { 
     "cx": 0,
     "cy": 30,
     "r": 10
  },
   styles: {
     "fill: "#00ff00",
     "stroke": "#0000ff"
  }

这样你就可以简单地做...

var elementEnter = element.enter()
    .append(function (d) {return d.type;})
    .attr("class", "element")
    .attr(function(d) {return d.attributes});
    .style(function(d) {return d.styles});

如果您仍然想保留当前的格式，您可以执行以下操作...

var elementEnter = element.enter()
    .append(function (d) {return d.type;})
    .attr("class", "element")
    .attr(function(d) {return arrToObj(d.attributes)});
    .style(function(d) {return arrToObj(d.styles)});

function arrToObj(arr) {
   var obj = {};
   arr.forEach(function(keyValue){
     obj[keyValue.label] = keyValue.val;
   });
   return obj;
}