Динамические возвращаемые значения в функции добавления

Question

Я использую d3 library, и я хочу создать различные элементы, проверив некоторые значения. Если я это сделаю:

elements.append("rect").attr(...); 

Что произойдет, если я хочу создать разные элементы? Я пробовал:

elements.append(function (d) { 
    if (d.foo) { 
     return "rect"; 
    } 
    return "circle"; 
}); 

Это, похоже, не сработает.

Какая альтернатива этому?

Answer 1

Как вы уже отмечали, .append() принимает функцию, которая возвращает элемент DOM, добавляемый. Это выглядит следующим образом.

var data = ["circle", "rect"]; 

d3.select("svg").selectAll(".shape").data(data) 
    .enter() 
    .append(function(d) { 
    return document.createElementNS(d3.ns.prefix.svg, d); 
    }); 

Конечно, вы также должны установить все атрибуты правильно, что суть метода - в принципе, вам не нужно много if/switch заявления для обработки каждого типа элемента, но на практике вы делаете, потому что атрибуты, которые вам нужно установить, отличаются (если вы не хотите все устанавливать для всего).

Полная демо-версия here.

Answer 2

Даже append function accepts a function, я не уверен, как это должно работать (может быть, кто-то приносит свет здесь). Однако следующее решение для чтения человека и легко осуществить:

elements.each(function (d) { 
    var el = d3.select(this); 
    var type = "circle"; 
    if (el.foo) { 
     type = "rect"; 
    } 
    var aType = el.append(type); 
    if (type === "rect") { 
     aType.attr("rx", 5) 
      .attr("ry", 5) 
      .attr("height", ...) 
      .attr("width", ...); 
    } else if (type === "circle") { 
     aType.attr("r", ...); 
    } 
});