如何正确地进行数据映射/数组以获得不同的颜色？D3.js

我已经找过了，感到困惑

我的图形有两个规则条和一个具有5个不同值的堆叠条。我希望他们都是不同的颜色，所以7种不同的颜色

首先，我只是试着在每个条上放置一种颜色（忽略堆叠的条）。我正在使用V4

var data = [
  {month: "june", a: 500, color: 'green'},
  {month: "july", a: 90, b: 90, c: 90, d: 90, e: 90, color: 'orange'},
  {month: "august", a: 240, color: 'red'}
];

var series = d3.stack()
    .keys(["a", "b", "c", "d", "e", "f", "g", "h", "color"])
    .offset(d3.stackOffsetDiverging)
    (data);

然后我试着这样引用它

.attr("fill", data.map(function(d) { return d.color; }))

显然这是错误的，因为我没有颜色。我也试过一些别的东西

对于堆叠条（或所有三个），我实际上是这样的，但我想硬编码颜色，而不是基于值范围的颜色

d3.scale.ordinal().range(["hexcolor1", "hexcolor2", "hexcolor3", "hexcolor4", "hexcolor5"]).range()

找到以下内容来回答我的部分问题：

我的常规条（我有一些非堆叠条）在我的颜色数组中都得到第一种颜色。我的堆叠条在数组中获得不同的颜色

小提琴链接过期了，但OP提到了“另一套颜色”？我不确定您的代码是否仅用于重复颜色。我想要类似的东西：红色条（不堆叠）、绿色条（不堆叠）、紫色/粉色/黄色/橙色条、蓝色条（不堆叠）

编辑：实际上，当我输入j代码时，我没有得到任何颜色（全黑）

var data = [
  {month: "mike", a: 500},
  {month: "judy", a: 90, b: 90, c: 90, d: 90},
  {month: "matt", a: 240}
];

var mycolors = ['#386cb0','#487cc0','#589cd0','#988cf0'];

var mycolorsb = ['#FFFF00'];

var series = d3.stack()
    .keys(["a", "b", "c", "d", "e", "f", "g", "h", "color"])
    .offset(d3.stackOffsetDiverging)
    (data);

var svg = d3.select("svg"),
    margin = {top: 30, right: 20, bottom: 60, left: 130},
    width = +svg.attr("width"),
    height = +svg.attr("height");

var y = d3.scaleBand()
    .domain(data.map(function(d) { return d.month; }))
    .rangeRound([margin.top, height - margin.bottom])

var x = d3.scaleLinear()
    .domain([0,1000])
    .rangeRound([margin.left, width - margin.right]);

svg.append("g")
  .selectAll("g")
  .data(series)
  .enter().append("g")
    .attr ("fill", function(d, i, j) { return mycolors[(j*4)+i]; })
  .selectAll("rect")
  .data(function(d) { return d; })
  .enter().append("rect")
    .attr("height", 75)
    .attr("y", function(d) { return y(d.data.month); })
    .attr("x", function(d) { return x(d[0]); })
    .attr("width", function(d) { return x(d[1]) - x(d[0]); })

此外，我还尝试执行类似以下代码的操作： 但它似乎不像我那样工作。哑光条在阵列中仍然获得相同的第一种颜色

.attr("fill", function(d, i, j) { return d.month === "matt" ? mycolorsb[i] : mycolors[i]; })

---

我可以在创建后替换/覆盖颜色，因为它只有2或3个非堆叠条。我不知道怎么做。

首先，您混合了v3和v4/5语法。你使用的版本到底是什么？其次，堆栈生成器无法处理该数据。最后，请更好地解释你的目标：你希望每个酒吧都有不同的颜色，不管是哪一组还是哪一个变量，对吗？是的，每个酒吧都会不同。（不是随机的，而是指定的。）在找到下面的其他代码后，我放弃了尝试执行data.map和d3.scale.ordinal。删除了“答案”。我一直在使用V4。有很多我不知道。理想的结果是迈克酒吧是橙色的，朱迪酒吧是4种不同的蓝色/紫色，马特酒吧是红色的。