javascript - D3追加不同元素，保留共同索引

Question

我的应用程序应该根据数据类型将不同的元素附加到 SVG。我的代码或多或少看起来像这样:

 var elements = svg.selectAll(".elements")
    .data(someData)
    .enter().append("g");

var circles = elements.filter(function (d,i) {
    return d.type == "category1"
})
    .append("circle")


var rectangles = smallCircles.filter(function (d,i) {
            return d.type == "category2"
        })
            .append("rect")

因此，如果data.type =“catgory1”，程序应该附加一个圆形，如果等于“category2”，则应该附加一个矩形。我遇到的问题是我根据它们各自的索引(函数(d，i)中的“i”)设置它们在SVG上的位置。但是，为了做到这一点，我需要这两种元素类型之间的索引序列保持一致。有没有比只使用每次附加新元素时都会++ 的外部变量更好的方法？

Answer 1

有几种方法可以做到这一点。

首先，您可以使用 .each 并封装附加逻辑:

var elements = svg.selectAll(".elements")
  .data([
    {
      type: "category1"
    },{
      type: "category2"
    } 
  ])
  .enter().append("g");

elements.each(function(d,i){

  // i is index on everything

  var self = d3.select(this);
  switch(d.type) {
      case "category1":
          self.append("circle");
          break;
      case "category2":
          self.append("rect");
          break;
      default:
          break;
  }
});

或者，第二，更好的方法是让元素成为数据的一部分:

var data = [
    {
      type: "category1"
    },{
      type: "category2"
    } 
  ];

data.forEach(function(d){
  switch(d.type) {
      case "category1":
          d.elem = "circle"
          break;
      case "category2":
          d.elem = "rect"
          break;
      default:
          break;
  }
});

var svg = d3.select('body').append('svg');

var elements = svg.selectAll(".elements")
  .data(data)
  .enter().append("g");

elements.append(function(d){
  return document.createElement(d.elem);
});