Javascript 使用d3根据索引优雅地执行不同的操作

我正试图使用d3为我的图形创建一个图例，我想我可以使用一个表，每行包含以下HTML：

用户
123

最终的结果看起来有点像

我的数据以以下形式整齐地放置在每一行上：

{color:'red'，key:'user'，value:123}

我用这个代码来创建单元格：

let cells=d3.selectAll（'tr'）.selectAll（'td'））
.数据（功能（d）{
返回[d.颜色、d.键、d.值]；
});
cells.enter（）.append（'td'）.merge（单元格）
.文本（功能（d，i）{
返回i==0？''：d；
})
.样式（“背景”，功能（d，i）{
返回i==0？d:“”；
})
.每个（功能（d，i）{
如果（i==0）{
这个.classList.add（'swatch'）；
}
});

代码运行得很好，但通过重复检查第一个单元格的行为，它看起来非常难看。我是否可以使用更干净的方法

---

似乎我应该使用

文本设置所有内容，并使用CSS将其样式设置为一个颜色样本，但这是不一样的。
由于不同的表格单元格的操作非常不同，因此可以使用多个附录和类来分离元素。看起来是这样的：

  let cells = d3.select('tbody').selectAll('tr').data(bindData);
  let cellsEnter = cells.enter().append('tr');
  let swatches = cellsEnter.append('td').classed('swatch', true);
  d3.selectAll('table .swatch')
    .style('background', function (d) { return d.color });
  let otherCells = d3.selectAll('table tr').selectAll('.other')
    .data(function (d) {
      return [d.key, d.value];
    });
  otherCells.enter()
    .append('td').classed('other', true)
      .merge(otherCells).text(function (d) { return d; });

下面是一个工作片段：


函数更新数据（bindData）{
让单元格=d3。选择（'tbody'）。选择全部（'tr'）。数据（bindData）；
设cellsEnter=cells.enter（）.append（'tr'）；
让newsweatchs=cellsEnter.append（'td'）.classed（'swatch'，true）；
d3.selectAll（'table.swatch'）
.style（'background'，function（d）{return d.color}）；
让otherCells=d3.selectAll（'table tr'）。selectAll（'other'）。数据（函数（d）{
返回[d.key，d.value]；
});
otherCells.enter（）
.append（'td'）.classed（'other'，true）
.merge（otherCells）.text（函数（d）{return d；}）；
}
风险值数据=[
{颜色：'red'，键：'agnes'，值：'1'}，
{颜色：'green'，键：'bernard'，值：'2'}，
{颜色：'blue'，键：'connie'，值：'3'}
];
更新数据（数据）
.swatch{
显示：内联块；
高度：10px；
宽度：10px；
}
由于不同的表单元格的操作完全不同，因此可以使用多个附录和类来分隔元素。看起来是这样的：

  let cells = d3.select('tbody').selectAll('tr').data(bindData);
  let cellsEnter = cells.enter().append('tr');
  let swatches = cellsEnter.append('td').classed('swatch', true);
  d3.selectAll('table .swatch')
    .style('background', function (d) { return d.color });
  let otherCells = d3.selectAll('table tr').selectAll('.other')
    .data(function (d) {
      return [d.key, d.value];
    });
  otherCells.enter()
    .append('td').classed('other', true)
      .merge(otherCells).text(function (d) { return d; });

下面是一个工作片段：


函数更新数据（bindData）{
让单元格=d3。选择（'tbody'）。选择全部（'tr'）。数据（bindData）；
设cellsEnter=cells.enter（）.append（'tr'）；
让newsweatchs=cellsEnter.append（'td'）.classed（'swatch'，true）；
d3.selectAll（'table.swatch'）
.style（'background'，function（d）{return d.color}）；
让otherCells=d3.selectAll（'table tr'）。selectAll（'other'）。数据（函数（d）{
返回[d.key，d.value]；
});
otherCells.enter（）
.append（'td'）.classed（'other'，true）
.merge（otherCells）.text（函数（d）{return d；}）；
}
风险值数据=[
{颜色：'red'，键：'agnes'，值：'1'}，
{颜色：'green'，键：'bernard'，值：'2'}，
{颜色：'blue'，键：'connie'，值：'3'}
];
更新数据（数据）
.swatch{
显示：内联块；
高度：10px；
宽度：10px；
}
您真的需要为此构建html表吗？更自然的做法是将您的数据映射到一个
列表中，并使用传入数据设置的项目符号颜色：


var数据=[
{颜色：“红色”，用户：“鲍勃”，值：123}，
{颜色：“橙色”，用户：“卡罗尔”，值：234}，
{颜色：“绿色”，用户：“Ted”，值：345}，
{颜色：“蓝色”，用户：“Alice”，值：1234}
];
var list=d3.选择（#用户列表）
.selectAll（“li”）
.数据（数据）；
var item=list.enter（）
.附加（“li”）
.attr（“类”、“样本”）
.style（“color”，d=>d.color）；
变量键=项目
.append（“span”）
.text（d=>d.user）；
var VAL=项目
.append（“pre”）
.text（d=>d.value）
.swatch{
列表样式类型：方形；
}
.样本跨度{
显示：内联块；
宽度：50px；
}
.swatch pre{
显示：内联块；
宽度：50px；
文本对齐：右对齐；
颜色：黑色；
}


您真的需要为此构建一个html表吗？更自然的做法是将您的数据映射到一个
列表中，并使用传入数据设置的项目符号颜色：


var数据=[
{颜色：“红色”，用户：“鲍勃”，值：123}，
{颜色：“橙色”，用户：“卡罗尔”，值：234}，
{颜色：“绿色”，用户：“Ted”，值：345}，
{颜色：“蓝色”，用户：“Alice”，值：1234}
];
var list=d3.选择（#用户列表）
.selectAll（“li”）
.数据（数据）；
var item=list.enter（）
.附加（“li”）
.attr（“类”、“样本”）
.style（“color”，d=>d.color）；
变量键=项目
.append（“span”）
.text（d=>d.user）；
var VAL=项目
.append（“pre”）
.text（d=>d.value）
.swatch{
列表样式类型：方形；
}
.样本跨度{
显示：内联块；
宽度：50px；
}
.swatch pre{
显示：内联块；
宽度：50px；
文本对齐：右对齐；
颜色：黑色；
}


我想其他人说的是，仅仅使用纯CSS设置文本颜色是不可能的——因为您已经在数据集中定义了颜色字符串，您可以在渲染中使用该字符串，作为类名、内联样式或属性值。您想从数据集中删除颜色，还是只是简化当前的d3逻辑？我想简化当前的d3逻辑。重复的条件感觉像一个黑客，事实上，
color
需要一个自己的
td
，这是它与
enter
/
merge
作为
键和
值相同的唯一原因。我想其他人说的是，仅仅使用纯CSS是不可能设置文本颜色的