根据数据集改变颜色（d3）

Question

我有两个数据集 d1 和 d2，如下所示：

const d1 = [
 {group: "H", value: 6},
 {group: "I", value: 2},
 {group: "M", value: 3}
];
const d2 = [
 {group: "H", value: 1},
 {group: "I", value: 12},
 {group: "M", value: 2}
];

和一个名为 makethisgraph 的函数，其中发送的“数据”是基于我单击的按钮的 d1 和 d2。在此函数中，根据数据 I select，条形会发生变化以匹配值。我想以这样的方式进行，如果我 select d1 那么条形的颜色变为红色，如果 d2 那么它变为绿色

function makethisgraph(data) {
 var u = svg.selectAll("rect")
 .data(data)
 u .enter()
 .append("rect")
 .merge(u)
 .transition()
 .duration(1000)
 .attr("x", function(d) { return x(d.group); })
 .attr("y", function(d) { return y(d.value); })
 .attr("width", x.bandwidth())
 .attr("height", function(d) { return height - y(d.value); })
 .attr("fill", function(d, i) {
    //  if ( data = d1)
    //  {
    //      return "red"
    //  }
    //  else
    //  {
    //      return "green"
    //  }
  return "blue"
});

我试过写如果我得到的数据是d1那么它将是红色但是它不起作用。还有其他方法可以解决吗？

Answer 1

向makethisgraph添加一个color参数：

function makethisgraph(data, color) {
  ...
  u.enter()
   ...
   .attr("fill", color);
}

...
makethisgraph(d1, 'red');
makethisgraph(d2, 'green');

根据数据集改变颜色（d3）

Change colour based on data set (d3)

javascript

d3.js