【问题标题】:How to hide first Y Axis line on an nvd3 chart?如何隐藏 nvd3 图表上的第一条 Y 轴线?
【发布时间】:2015-09-29 19:14:26
【问题描述】:

Plnkr 示例: http://plnkr.co/edit/19D5cnrVYdUrMlblQARy?p=preview

我的应用截图:

我尝试过修改 CSS,但是我只能删除第二条(右 Y 轴线),而不是第一条左 Y 轴线。

我尝试过的:

.nv-y { 
    display: none;
}

以及此答案中的所有行:Alter first vertical grid line in nvd3

d3.selectAll('.nv-y').attr('display','none')

d3.selectAll('.nv-y path').attr('opacity','0.1')

d3.selectAll('.nv-y path').attr('display','none')

我目前的drawChart函数:

function drawChart(res) {
    console.log(' ');
    console.log('drawChart res = ',res);
    nv.addGraph(function() {
        var chart = nv.models.linePlusBarChart()
            .margin({top: 30, right: 40, bottom: 50, left: 40})
            .x(function(d,i) { return i })
            .y(function(d) { return d[1] })
            .color(d3.scale.category10().range());

        chart.xAxis.tickFormat(function(d) {
            var dx = res[0].values[d] && res[0].values[d][0] || 0;
            return d3.time.format('%x')(new Date(dx))
        });

        chart.y1Axis
            .tickFormat(d3.format(',f'));

        chart.y2Axis
            .tickFormat(function(d) { return '$' + d3.format(',f')(d) });

        chart.bars.forceY([0]);
        // https://stackoverflow.com/questions/23754188/nvd3-js-how-to-disable-tooltips-for-one-serie-only
        chart.lines.interactive(false);
        // http://nvd3-community.github.io/nvd3/examples/documentation.html#line
        chart.height(280);
        // If not chart data is avaliable to display:
        chart.noData("There is no Data to display at the moment.");

        // Remove legend:
        chart.showLegend(false);

        d3.select('#chart svg')
            .datum(res)
            .transition().duration(500)
            .call(chart);

        d3.selectAll('.nv-y path').attr('display','none');

        nv.utils.windowResize(chart.update);

        return chart;
    });
}

【问题讨论】:

    标签: javascript angularjs d3.js charts nvd3.js


    【解决方案1】:

    如果你想隐藏第一个 y 轴:

    .nv-y1{
      display:none;
    }
    

    如果你想隐藏第二个 y 轴:

    .nv-y2{
      display:none;
    }
    

    http://plnkr.co/edit/IgFh1rV4a6ubAMe0VqT2?p=preview

    【讨论】:

    • 奇怪,因为我已经把它放在你在这里分享的同一个 plunkr 的 style.css 中是工作代码plnkr.co/edit/IgFh1rV4a6ubAMe0VqT2?p=preview
    • 太奇怪了,这在我的应用程序环境中不起作用,但是在我提供的 plnkr 示例中确实如此。所以检查你的答案,但留下我的以防万一这也有助于其他人。
    • 啊,我使用的 d3 和 nvd3 库与 plnkr 不同...我在应用程序中使用的库是从 bower 和更新版本下载的。
    【解决方案2】:

    使用这个:

    .domain {
      display: none;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-11-30
      • 2020-11-02
      • 1970-01-01
      • 2013-02-05
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多