Question

我制作了一个带有对数比例的图形，背景中有网格线。我还想要删除子标记的网格线。任何人都可以知道如何做到这一点。我也尝试使用线性刻度，但它在日志图上看起来不合适。请提出一些技巧。谢谢。

以下是我生成网格线的代码

            function make_x_axis1() {
                return d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .ticks(12)
                }

            function make_y_axis1() {
                return d3.svg.axis()
                .scale(y)
                .orient("left")
                .ticks(8)
                }
            svg1.append("g")
            .attr("class", "grid")
            .attr("transform", "translate(0," + height + ")")
            .call(make_x_axis1()
            .tickSize(-height, 0, 0)
            .tickFormat("")
            );

            svg1.append("g")
            .attr("class", "grid")
            .call(make_y_axis1()
            .tickSize(-width,0, 0)
            .tickFormat("")
            );

Answer 1

我认为您要找的是.tickSubdivide上的axis设置。 http://bl.ocks.org/GerHobbelt/3605035有很多例子。这似乎是您正在寻找的相关内容：

svg.append("g")
    .attr("class", "x minor endticks classical log_x")
    .attr("transform", "translate(0," + axis_y + ")")
    .call(d3.svg.axis().scale(log_x).tickSubdivide(example_subdiv_A(log_x))
      .tickSize(12, function(d, i) {
        return (2 * d.subindex == d.modulus ? 8 :
                ((5 * d.subindex == d.modulus) && (d.modulus >= 10) ? 6 :
                 ((d.subindex % 2 == 0) && (d.modulus > 10) ? 5 :
                  (d.modulus > 10 ? 2 : 4))));
      }, -10))
    .call(descr("classical logarithmic, with output-dependent # of subticks, emphasis on the 2nd and other even (but only when we have 10+ subticks!) and .5 subdiv, and longer start/end ticks"));

这里他不仅改变了减法的数量，还改变了它们的大小。如果您根本不想要这些子语，可以将tickSubdivide设置为0以删除它们。如果你想要它们就像轴上的刻度一样，你需要使用.tickSize并做一些数学运算来设置主要刻度线的刻度标记大小，与次刻度标记分开。

Answer 2

我今天遇到了这个问题并找到了解决方案。我创建了一个手动删除这些网格线的功能。您要删除的网格线是没有文本值的网格线。

    function removeNoNameTicks(logAxisSelector) {
        var targetAxis = d3.select('g.x.axis');
        var gTicks = targetAxis.selectAll('.tick');
        if (gTicks.length > 0 && gTicks[0]) {
            gTicks[0].forEach(function (item, index) {
                // find the text if the text content is ""
                var textElement = d3.select(item).select('text');
                if (textElement.html() == '') {
                    item.remove();
                }
            });
        }
    }

如何删除日志比例的子标题的网格线

2 个答案: