d3.js缩放/域值的意外行为

Unexpected behaviour of d3.js Scale / Domain Values

本文关键字：意外 js 缩放 d3      更新时间：2023-09-26

很抱歉，但我已经花了大约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"]

数据集中有与场景相同数量的附加值，例如，它似乎使域加倍。

我似乎甚至无法在谷歌搜索中表达这个问题，所以请向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

您的问题就在这里：返回z（i）

您应该传递场景名称（"场景1"、"场景2"…），而不是i（0,1,2）

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

好的，谢谢你，我试着投票等，但似乎没有足够的分数。。。（顺便说一句，我在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所说，基本上这是为了确保数据包含对域的适当引用。

相关文章：