D3.js 缩放，序数轴不起作用 - 缩放行为中的比例设置有问题吗？

Question

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

Uncaught TypeError: undefined is not a function

我在这方面花了很多时间并缩小了问题的范围，但就是看不到解决方案。我想知道 D3 专家是否会帮助我看到光明。

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

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));
    };

因为 y0 在 .map(y0.invert) 行中未定义。

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

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);

该错误发生在缩放行为调用我的“缩放”函数之前。

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

.y(y)

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

我在下面包含了我的完整 JavaScript。非常感谢任何可以帮助我看到我的方式错误的人！

var data = [
        { "date": "2012-03-20", "total": 3, "initiative": 0 },
        { "date": "2012-03-21", "total": 8, "initiative": 0 },
        { "date": "2012-03-22", "total": 2, "initiative": 1 },
        { "date": "2012-03-23", "total": 10, "initiative": 1 },
        { "date": "2012-03-24", "total": 3, "initiative": 2 },
        { "date": "2012-03-25", "total": 20, "initiative": 2 }
    ];

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

    var margin = { top: 40, right: 40, bottom: 40, left: 40 },
        width = 600,
        height = 500;

    var x = d3.time.scale()
        .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
        .rangeRound([0, width - margin.left - margin.right]);

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

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .ticks(d3.time.days, 1)
        .tickFormat(d3.time.format('%a %d'))
        .tickSize(0)
        .tickPadding(8);

    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);

    var svg = d3.select('body').append('svg')
        .attr('class', 'chart')
        .attr('width', width)
        .attr('height', height)
        .attr('transform', 'translate(' + margin.left + ',' + margin.bottom + ')')
        .call(zoom);

    svg.append("rect")
        .attr('fill', 'none')
        .attr('stroke', 'blue')
        .attr("width", width)
        .attr("height", height);

    svg.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(' + margin.left + ',' + (height - margin.top) + ')')
        .call(xAxis);

    svg.append('g')
        .attr('class', 'y axis')
        .attr('transform', 'translate(' + margin.left + ',' + margin.bottom + ')')
        .call(yAxis);

    map = svg.selectAll('.chart')
        .data(data)
        .enter().append('rect')
        .attr('class', 'bar')
        .attr('x', function (d) { return x(new Date(d.date)) + margin.left; })
        .attr('y', function (d) { return y(ordinals[d.initiative]) + margin.bottom; })
        .attr('width', 50)
        .attr('height', 25);

    var clip = map.append("defs").append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("id", "clip-rect")
        .attr('stroke', 'red')
        .attr("width", width - margin.right - margin.left)
        .attr("height", height - margin.top - margin.bottom)
        .attr('transform', 'translate(' + margin.left + ',' + margin.bottom + ')');

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

    function zoomed() {

        svg.select(".x.axis").call(xAxis);
        svg.select(".y.axis").call(yAxis);
        map.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        map.attr("clip-path", "url(#clip)");

Answer 1

我认为您不能在有序轴上缩放/平移。

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

像这样定义你的序数：

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

而不是序数比例做一个线性比例：

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

接下来，当您制作 yscale 时，请使用刻度格式返回您选择的标签。

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", "");
    }
  })
}

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

工作代码在这里