我已经制作了一个对数比例的图,背景中有网格线。网格线是为我想要删除的子刻度绘制的。有谁知道怎么做吗?我也尝试过使用线性比例,但它在对数图上看起来并不合适。请推荐一些小窍门。谢谢。
以下是图表图像的链接:http://snag.gy/24j4i.jpg
下面是我生成网格线的代码
            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("")
            );发布于 2014-07-03 16:25:44
我想你要找的是你axis上的.tickSubdivide设置。在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"));在这里,他不仅改变了subticks的数量,还改变了它们的大小。如果您根本不需要这些子标记,可以将tickSubdivide设置为0以删除它们。如果你想让它们就像轴上的刻度一样,你需要使用.tickSize并做一些数学运算来分别设置主要刻度线和次要刻度线的刻度线大小。
发布于 2016-06-09 07:57:47
我今天遇到了这个问题,并找到了解决方案。我创建了一个函数来手动删除这些网格线。您要删除的网格线是没有文本值的网格线。
    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();
                }
            });
        }
    }
https://stackoverflow.com/questions/24547118
复制相似问题