D3追加不同的元素，保持共同的索引答案

【问题标题】：D3 append different elements, keep common indexD3追加不同的元素，保持共同的索引
【发布时间】：2016-07-18 23:06:31
【问题描述】：

我的应用程序应该根据数据类型将不同的元素附加到 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 上的位置。但是，为了做到这一点，我需要索引序列在这两种元素类型之间保持一致。有没有更好的方法来做到这一点，而不是只使用每次添加新元素时都会 ++ 的外部变量？

【问题讨论】：

标签： javascript d3.js

【解决方案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);
});

【讨论】：