Question

我制作了一个条形图，显示了底部的日期（可以是每日，每周等），它也有一个顶部的折线图，以显示额外的比较值。现在我正在尝试使用D3 JS网站中的不同示例向图表添加缩放功能，但我并没有太多的快乐。

到目前为止，这些是我的变量：

function pullIdArray(data) {
        var s = {};
        data.forEach(function(d) { s[d.date] = true; });
        var ret = [];
        for (var k in s) {
            console.log(k);
            ret.push(d3.time.format(dateFormatPattern)(new Date(k)))
        }
        console.log(ret);
        return ret;
    }    

    var margin = {top: 60, right: 20, bottom: 30, left: 60},
        width = $('.svg-container').width() - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
    .domain(pullIdArray(data))
    .rangeRoundBands([0, width], .2);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(function(d) {
            return d3.time.format(dateFormatPattern)(new Date(d));
        });

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5)
        .tickFormat(function(d) { return d + " kWh" });

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

    function zoomed() {
        svg.select(".x.axis").call(xAxis);
        svg.select(".y.axis").call(yAxis);
    }

    function reset() {
        d3.transition().duration(750).tween("zoom", function() {
            var ix = d3.interpolate(x.domain(), [-width / 2, width / 2]),
                iy = d3.interpolate(y.domain(), [-height / 2, height / 2]);
            return function(t) {
                zoom.x(x.domain(ix(t))).y(y.domain(iy(t)));
                zoomed();
            };
        });
    }

    var svg = d3.select(".svg-container svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.call(tip);
    svg.call(zoom);

缩放功能似乎不喜欢我使用rangeRoundBands来显示我的条形图，当我尝试在图表上滚动鼠标滚轮时，我得到了很多“未定义的不是函数”消息。

有人可以告诉我我做错了什么以及如何解决它？

感谢您的帮助。

编辑：更新了要在新功能pullIdArray中添加的代码。

的console.log（RET）;显示以下内容：

[ "Aug 22", "Aug 23", "Aug 24", "Aug 25", "Aug 26",
  "Aug 27", "Aug 28", "Aug 29", "Aug 30", "Aug 31",
  "Sep 01", "Sep 02", "Sep 03", "Sep 04", "Sep 05",
  "Sep 06", "Sep 07", "Sep 08", "Sep 09", "Sep 10",
  "Sep 11", "Sep 12", "Sep 13", "Sep 14", "Sep 15",
  "Sep 16", "Sep 17", "Sep 18", "Sep 19", "Sep 20",
  "Sep 21", "Sep 22", "Sep 23", "Sep 24", "Sep 25",
  "Sep 26", "Sep 27", "Sep 28", "Sep 29", "Sep 30",
  "Oct 01", "Oct 02", "Oct 03", "Oct 04", "Oct 05",
  "Oct 06", "Oct 07", "Oct 08", "Oct 09", "Oct 10",
  "Oct 11", "Oct 12", "Oct 13", "Oct 14", "Oct 15",
  "Oct 16", "Oct 17", "Oct 18", "Oct 19", "Oct 20",
  "Oct 21", "Oct 22", "Oct 23", "Oct 24", "Oct 25",
  "Oct 26", "Oct 27", "Oct 28", "Oct 29", "Oct 30",
  "Oct 31", "Nov 01", "Nov 02", "Nov 03", "Nov 04",
  "Nov 05", "Nov 06", "Nov 07", "Nov 08", "Nov 09",
  "Nov 10", "Nov 11", "Nov 12", "Nov 13", "Nov 14",
  "Nov 15", "Nov 16", "Nov 17", "Nov 18", "Nov 19",
  "Nov 20", "Nov 21", "Nov 22", "Nov 23", "Nov 24",
  "Nov 25", "Nov 26", "Nov 27", "Nov 28", "Nov 29"    ]

缩放D3 JS条形图

0 个答案: