d3.js 规模/域值的意外行为答案

【问题标题】：Unexpected behaviour of d3.js Scale / Domain Valuesd3.js 规模/域值的意外行为
【发布时间】：2016-04-17 00:24:58
【问题描述】：

很抱歉，但我花了大约 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())

...我得到了我的期望，例如数据集中的键：

[“场景 1”、“场景 2”、“场景 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, "场景 1", "场景 2", "场景 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

【问题讨论】：

标签： javascript d3.js dns scale

【解决方案1】：

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

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

如何获取场景名称？如果没有工作的 jfiddle 或查看 mapsorted 数组的内容（或它的映射版本），很难猜到

【讨论】：

感谢您的回复。我添加了数据排序数据集的控制台日志。唯一的问题是，当使用 stack() 布局将数据转换为 layers 变量时，它会丢弃场景名称数据 - 例如它们不在图层数据集中，只有原始数据排序数据。我已经添加了数据排序数据的控制台日志。

【解决方案2】：

好的，谢谢 tato，我试图投票等，但似乎没有足够的分数来做到这一点......（顺便说一下，我在 StackOverflow 上花费了大量时间，并且总是想投票给有用的答案- 如果可以的话，那就太好了）。

tato 基本上是正确的，我需要传递值而不是域的索引位置...我有效地处理了一个独立于数据集的域值，因此无法与之相关。

解决方案：

向包含场景名称的“层”添加一个值（场景 1，...）

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

使用它来设置域（而不是原始数据集）：

z.domain(layers.map(function(d, i) { return d[i].z; }));

然后在创建条形颜色和图例时使用“图层”数据集中的值来匹配域值：

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

legend.append("rect")
       .attr("x", width - 18)
       .attr("width", 18)
       .attr("height", 18)
       .style("fill", function(d, i) { return z(d); });

基本上，这是为了确保数据包含对域的适当引用，如 tato 所说。

【讨论】：