javascript - d3.js 规模/域值的意外行为

Question

抱歉，我已经花了大约 5 个小时来研究这个问题，但无法弄清楚发生了什么。我正在玩 http://bl.ocks.org/mbostock 上的一些示例网站并尝试向堆积条形图添加图例。

为此，我设置了比例和范围:

var z = d3.scale.ordinal()
          .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

加载数据后，我正在设置域:

z.domain(d3.keys(datasorted[0]).filter(function(key) { return key !== "xAxisD"; }));

如果我此时控制台日志...

console.log(z.domain().slice().reverse())

...我得到了我所期待的，例如数据集中的键:

["Scenario 1", "Scenario 2", "Scenario 3"]

然后我使用堆栈布局将数据修改为正确的格式:

  var layers = d3.layout.stack()(element.map(function(c) {
    return datasorted.map(function(d) {
    return {x: d.xAxisD, y: d[c]};
    });
  }));

接下来，我将一些组附加到已创建的 SVG 中，其中的样式由作为“z”比例的一部分生成的颜色填充:

var layer = svg.selectAll(".layer")
    .data(layers)
    .enter()
    .append("g")
        .attr("class", "layer")
        .style("fill", function(d, i) {  return z(i) ; });

现在当我控制台日志时...

console.log(z.domain().slice().reverse())

...我在我的量表中获得了额外的值:

[2, 1, 0, "Scenario 1", "Scenario 2", "Scenario 3"]

数据集中的场景有相同数量的附加值 - 例如看来域名加倍了。

我什至无法在 Google 搜索中描述该问题，因此请向 StackOverflow 寻求帮助。

提前致谢。

编辑 - 添加数据排序的控制台日志:

[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
 0: Object
   Strategy 1: 7967144.750000002
   Strategy 2: 1925965.1996200003
   Strategy 3: 198181.8768
   xAxisD: "m01"
   __proto__: Object
 1: Object
 2: Object
 3: Object
etc

Answer 1

你的问题在这里:return z(i)

您应该传递场景名称(“场景 1”、“场景 2”...)而不是 i (0,1,2)

如何获取场景名称？如果没有可用的 jfiddle 或查看映射排序数组(或其映射版本)的内容，很难猜测