在dimple.js中的动态图表中清除轴

问题描述

我使用的干净轴的功能由@JohnKiernander提供。这适用于静态图表。但是当我有一个更新的图表（在这个例子中，当点击一个按钮），干净的轴功能不能按预期工作。该功能也会删除轴的其他数字。有没有办法使此功能与动态图表一起使用？

I'm using the clean axis function courtesy of @JohnKiernander. This works fine with static charts. But when I have a chart that updates (in this example when a button in clicked), the clean axis function does not work as expected. The function also erases others numbers of the axis. Is there a way to make this function work with dynamic charts? or do I have to take another approach?

请参阅fiddle：以获得更好的解释。

See fiddle: http://jsfiddle.net/jdash99/oba54L1a/ for a better explanation.

// Clean Axis Function for reference
// Pass in an axis object and an interval.
var cleanAxis = function (axis, oneInEvery) {
    // This should have been called after draw, otherwise do nothing
    if (axis.shapes.length > 0) {
        // Leave the first label
        var del = 0;
        // If there is an interval set
        if (oneInEvery > 1) {
            // Operate on all the axis text
            axis.shapes.selectAll("text").each(function (d) {
                // Remove all but the nth label
                if (del % oneInEvery !== 0) {
                    this.remove();
                    // Find the corresponding tick line and remove
                    axis.shapes.selectAll("line").each(function (d2) {
                        if (d === d2) {
                            this.remove();
                        }
                    });
                }
            del += 1;
            });
        }
    }
};

推荐答案

我建议切换到set opacity而不是完全去除标签。我已经用两种方式修改了你的小提琴。首先，清除轴方法变成：

I suggest switching to a method with sets opacity rather than removing the label completely. I've modified your fiddle in 2 ways. Firstly the clean axis method becomes:

var cleanAxis = function (axis, oneInEvery) {
    // This should have been called after draw, otherwise do nothing
    if (axis.shapes.length > 0) {
        // Leave the first label
        var del = 0;
        // If there is an interval set
        if (oneInEvery > 1) {
            // Operate on all the axis text
            axis.shapes.selectAll("text").each(function (d) {
                d3.select(this).attr("opacity", 1);
                // Remove all but the nth label
                if (del % oneInEvery !== 0) {
                    d3.select(this).attr("opacity", 0);
                }
                del += 1;
            });
        }
    }
};

也因为你正在绘制动画，你不能直接绘制cleanAxis，你需要分配改为系列的afterDraw属性：

also because you are animating the draws you can't draw cleanAxis straight after, you need to assign it to the afterDraw property of the series instead:

s.afterDraw = function () { cleanAxis(myAxis, 10); };

这避免了标签创建/隐藏时的竞争条件。

This avoids a race condition on the label creation/hiding.

以下是更新的小提琴： http://jsfiddle.net/oba54L1a/2/

Here's the updated fiddle: http://jsfiddle.net/oba54L1a/2/

这篇关于在dimple.js中的动态图表中清除轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！