Question

我正在尝试创建一个简单的可缩放图表，其中包含时间缩放的x轴和序数y轴（字符串数组）。图表适用于实值y轴，但是当我使用序数y轴时，我得到了一个

right

我花了很多时间来解决这个问题并将问题缩小，但却无法看到解决方案。我想知道D3专家是否会帮助我看清楚。

对于专家级读者，在第1344行的d3.v3.js重新缩放功能中会发生异常。

Uncaught TypeError: undefined is not a function

因为y。在.map（y0.invert）行中未定义。

我的代码中的罪魁祸首似乎是我设置自定义比例函数并在缩放事件处理程序中使用它的方式。这是我设置的y轴顺序刻度和缩放功能片段。

function rescale() {
      if (x1) x1.domain(x0.range().map(function(x) {
        return (x - view.x) / view.k;
      }).map(x0.invert));
      if (y1) y1.domain(y0.range().map(function(y) {
        return (y - view.y) / view.k;
      }).map(y0.invert));
    };

在缩放行为调用我的＆＃34;缩放＆＃34;之前发生错误。功能。

在缩放功能中，如果我注释掉

var y = d3.scale.ordinal()
        .domain(ordinals)
        .rangePoints([height - margin.top - margin.bottom, 0]);

var yAxis = d3.svg.axis()
        .scale(y)
        .orient('left')
        .tickPadding(8);

var zoom = d3.behavior.zoom()
        .x(x)
        .y(y)
        .scaleExtent([1, 4])
        .on("zoom", zoomed);

图表正确缩放x轴，但当然y轴不缩放，因为我没有给出缩放行为我的序数比例y。我不确定我需要做些什么来纠正这个问题。有人可以帮忙吗？

我在下面添加了完整的JavaScript。非常感谢任何可以帮我看到错误的人！

.y(y)

Answer 1

我认为你不能在顺序轴上进行缩放/平移。

一个解决方法是制作线性比例并使其看起来像序数比例。

定义你的序数：

var ordinals = ["a", "b", "c"];

而不是有序量表的线性比例：

var yscale = d3.scale.linear()
  .domain([0, ordinals.length])
  .range([height - margin.top - margin.bottom, 0]);

接下来，当你使yscale使用tick格式返回你选择的标签时。

var yAxis = d3.svg.axis()
  .scale(yscale)
  .orient('left')
  .tickFormat(function(d) {
    return ordinals[d];//now for 0 it will return 'a' for 1 b and so on...
  })
  .tickPadding(8);

使缩放像这样使用新的y比例：

var zoom = d3.behavior.zoom()
  .x(x)
  .y(yscale)
  .scaleExtent([1, 20])
  .on("zoom", zoomed);

隐藏所有不带标签的刻度

var hideTicksWithoutLabel = function() {
  //hide ticks without label
  svg.selectAll(".y .tick")[0].forEach(function(g) {
    if (d3.select(g).select("text").text() == "") {
      d3.select(g).style("display", "none");
    } else {
      d3.select(g).style("display", "");
    }
  })
}

现在在缩放后调用此函数。

工作代码here

D3.js缩放，Ordinal轴不工作 - 在缩放行为中设置缩放比例问题？

1 个答案: