Question

我正在使用d3js从CSV表加载数据。我将这些值放在一个表中，然后根据第2列和第3列的值设置第10列中条目的颜色（例如，如果第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/

根据兄弟的值更新一个元素的属性

1 个答案: