Question

我有一个简单的（o.k.不那么简单）条形图，显示了一个消费者的电力消耗（C1）。我将另一个消费者（C2）的消费添加为行。 C2的最大消耗量如果高于C1的最大消耗量，那么我必须重新调整。我已经解决了这个问题但不是我想要的那么漂亮。

我计算新的yMax，设置域，重新缩放轴（漂亮）删除所有'rect'并重绘（不漂亮）。有没有可能说：嘿吧，我有一个新的比例，下载一个漂亮的动画：）

这里是rescale方法：

var rescale = function () {
            //in this function the new _maxYValue is set
            renderLineView();
            var data = _data;
            y.domain([_minYValue, _maxYValue]);
            _svg.select(".y.axis")
                        .transition().duration(1500).ease("sin-in-out")
                        .call(yAxis());
            _svg.selectAll("rect").remove();

            var barWidth = getBarWidth(data.length);

            var bars = d3.select("#layer_1").selectAll(".bar").data(data, function (d) {
                return d.xValue;
            });

            bars.enter().append("rect")
                         .attr("class", "daybarincomplete")
                         .attr("x", function (d, i) {

                             return x(d.xValue) + 4;
                         })
                         .attr("width", barWidth)
                         .attr("y", function (d) {
                             return Math.min(y(0), y(d.value));
                         })
                         .attr("height", function (d) {
                             return Math.abs(y(d.value) - y(0));
                         });

        }

这是jsfiddle：http://jsfiddle.net/axman/v4qc7/5/

事先提前

©A-X-I

Answer 1

使用.transition()条形图调用来确定数据更改时所需的行为（例如条形高度更改）。您可以将.attr()函数链接到其后设置条形高度等。

要处理刷新之间消失的数据点（例如，您最初有10个条，但现在只有9个条），请将.exit().remove()函数链接到条形图。

使用上述两种方法，您还可以将.duration(200).ease('linear')之类的内容链接起来，使其看起来非常漂亮。

Answer 2

几乎是@ninjaPixel所说的。这里有一个易于理解的例子 http://examples.oreilly.com/0636920026938/chapter_09/05_transition.html

d3js重新缩放重绘条形图而没有新数据

2 个答案: