Как создавать элементы в зависимости от данных в D3?

глядя на образец:

d3.select("body").selectAll("div")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
    .text(function(d) { return d; });

Не могу помочь, но задаться вопросом, как сделать append чувствительным к предоставленным данным - скажем do append and fill text с некоторым предикатом say if d == 8 othervise не добавлять?

Ответ 1

Самый простой способ - отфильтровать ваш массив перед вызовом .data( ... ):

d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42].filter(function(d){ return d < 10; }))
  .enter().append("div")
    .text(function(d) { return d; });

создаст div только для 4 и 8.

В качестве альтернативы вы можете отфильтровать свой выбор после привязки вашего массива к элементам на странице, чтобы условно создать дочерние элементы:

d3.select("body").selectAll("div")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("div")
    .text(function(d) { return d; })
 .filter(function(d){ return d == 8; }).append("span")
    .text("Equal to 8")