Question

我在d3js v4中有日期堆积条形图，我想添加画笔选择功能。

我无法从d3.event.selection中获得x值。它显示TypeError: x.invert is not a function错误。为什么？我正在使用example中的画笔代码。我想念任何特别的图书馆吗？

这是我的代码的一部分。底部是最重要的一个：D：

 var x = d3.scaleBand().range([0, width]).padding(0.1);
        var y = d3.scaleLinear().range([height, 0]);
        var z = d3.scaleOrdinal().range(['#d53e4f', '#fc8d59', '#fee08b', '#ffffbf', '#e6f598', '#99d594', '#3288bd']);

        x.domain(data.map(function (d) {
            return parseDate(d.time);
        }));

        y.domain([0, d3.max(data, function (d) {
            return d.sum;
        })]);
        z.domain(data.map(function (d) {
            return d.keys;
        }));


   var stack = d3.stack()
            .keys(keys)
            .order(d3.stackOrderNone)
            .offset(d3.stackOffsetNone);

        var layers = stack(data);

        var layer = g.selectAll(".layer")
            .data(layers)
            .enter().append("g")
            .attr("class", "layer");

         layer.selectAll("rect")
            .data(function (d) {
                return d;
            })
            .enter().append("rect")
            .attr('class', 'barStacked')
            .attr("x", function (d) {
                return x(parseDate(d.data.time));
            })
            .attr("y", function (d) {
                return y(d[1]);
            })
            .attr("height", function (d) {
                return y(d[0]) - y(d[1]);
            })
            .attr("width", x.bandwidth());

     g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + (height + 5) + ")")
            .call(xAxis);

        g.append("g")
            .attr("class", "axis axis--y")
            .attr("transform", "translate(0,0)")
            .call(yAxis);


       g.append("g")
            .attr("class", "brush")
            .call(d3.brushX()
                .extent([[0, 0], [width, height]])
                .on("end", brushended));

        function brushended() {
          if (!d3.event.sourceEvent) return; // Only transition after input.
          if (!d3.event.selection) return; // Ignore empty selections.
            var extent = d3.event.selection;
             console.log(x.domain([ x.invert(extent[0]), x.invert(extent[1]) 
    ]));

        }
    }

Answer 1

正如安德鲁所说，scaleBand没有反转方法。链接中的示例是一个连续的（时间）刻度，它确实具有一个反转方法（here）。

如果您的scaleBand有效地表示一个连续的时间标度，则一种解决方案是创建一个与标度'x'相同范围的附加标度（scaleTime），然后使用此方法的invert方法。指定域时，您需要小心考虑带宽和填充，以使其等同于“ x”。

d3js刷如何获取选择值

1 个答案: