NVD3堆积条形图X轴标签问题

时间:2017-06-07 12:35:38

标签: d3.js charts nvd3.js stacked-chart

我编写了使用NVD3绘制堆积条形图的代码。 一切看起来都很完美,直到我们调整窗口大小。 网址 - https://jsfiddle.net/sujit77/45zg0yoe/2/

问题是x轴标签向上移动并与轴刻度合并。

nv.addGraph(function() {
    var chart = nv.models.multiBarChart()
            .margin({top: 20, right: 20, bottom: 90, left: 50})
            .stacked(true)
            .reduceXTicks(false)
            //  .staggerLabels(true)
            .color(d3.scale.category20().range())
            .x(function(d){ return d.key })
                .rotateLabels(-45)
            .y(function(d){ return d.value })

    chart.xAxis
        .axisLabel('This is X Axix')
        //.axisLabelDistance(80)

    chart.yAxis
        .axisLabel('This is Y Axix')
        .axisLabelDistance(40)
        .tickFormat(d3.format(",f"));

    d3.select('#chart').append('svg')
        .attr('width', 500)
        .attr('height', 500)
        .datum(chartData)
        .call(chart)

    d3.select(".nv-axislabel").attr("y", 76)

    console.log(d3.select(".nv-axislabel").attr("y"))

    nv.utils.windowResize(chart.update);
    return chart;
});

0 个答案:

没有答案