Question

我正在用dimple.js做一个条形图。我的代码如下：

 var data = [{x:1, y:10}, {x:2, y:15}, {x:3,y:27}]
 var svg;

 var chart;
 var svg = dimple.newSvg("body", 800, 600);

 var chart = new dimple.chart(svg, data);

 chart.defaultColors = [
 new dimple.color("#FF0000", "Blue"), // Set a red fill with a blue stroke
 new dimple.color("#00FF00"), // Set a green fill with a darker green stroke
 new dimple.color("rgb(0, 0, 255)") // Set a blue fill with a darker blue stroke
 ]; 

 x = chart.addCategoryAxis("x", "x");
 chart.addMeasureAxis("y", "y");
 chart.addSeries("country", dimple.plot.bar);
 x.addOrderRule("x");
 chart.draw();

当我只有三个（或几个）数据点时它工作正常，但是当我有两百多个数据点时，x轴会变得混乱。有没有办法在每个n点显示x标签中的单位？（所以不是显示1,2,3 ......而是显示1，n + 1,2 * n + 1，......）？

Answer 1

你可以用d3绘制后修改它。这是一种方法，它将删除每个第n个标签：

// 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 = false;
        // 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;
            });
        }
    }
};

这是为像你这样的案件工作的小提琴：

http://jsfiddle.net/V3jt5/1/

（我还更新了您的订单规则以避免字符串排序问题）

如何在用dimple.js制作的图形标签中添加空格？

1 个答案: