Обновление свойства одного элемента на основе значения sibling

Question

Я использую d3js с данными, загружаемыми из таблицы CSV. Я помещаю эти значения в таблицу, а затем хочу установить цвет записей в столбце 10 в зависимости от значения столбцов 2 и 3 (например, сделать что-то, если сумма значений в столбцах 2 и 3 положительна).

Я понимаю, как окрасить одну запись в зависимости от ее собственной ценности, но выполнение этого в зависимости от других значений выходит за рамки моих навыков программирования. Может кто-то помочь мне с этим?

d3.select("#viz") 
    .append("table") 
    .style("border-collapse", "collapse") 
    .style("border", "2px black solid") 

    .selectAll("tr") 
    .data(parsedCSV) 
    .enter().append("tr") 

    .selectAll("td") 
    .enter().append("td") 
    .style("border", "1px black solid") 
    .style("padding", "2px") 
    .text(function(d){return d;}) 

Answer 1

Это проще всего, если у вас есть доступ к массиву строк. Я предпочитаю использовать .each для такого рода задачи:

// ...snip... 
.enter().append("tr") 
.each(function(row) { 
    // now the whole row array is in scope for all sub-elements 
    d3.select(this) 
     .selectAll("td") 
     .data(function(d){ return d; }) 
     .enter().append("td") 
     .style("border", "1px black solid") 
     .style("padding", "2px") 
     .style("background", function(d, i) { 
      // get data for last sibling 
      var prev = row[i - 1]; 
      // determine the color 
      return prev == 1 ? 'yellow' : 
       prev == 2 ? 'orange' : 
       prev == 3 ? 'red' : 
       'none'; 
     }) 
     .text(function(d){ return d; }); 
}); 

См скрипку: http://jsfiddle.net/V9vMW/