Question

我已经按照D3制作了enter image description here以下堆积的条形图。

您无法看到完整的x轴标签，

bellow是我的JavaScript代码

var stackedBarChartData = [{
    key: 'Port Klang',
    'color' : COLOR_REDS,
    values: [
        { x:"Allocated", y: 10}, { x:"Unallocated", y: 21}, { x:"Unallocated Expired", y: 45}, { x:"Expiring within 10 days", y: 76}, { x:"Floating", y: 55}, { x:"Hub Inventory", y: 68},{ x:"Total Inventory", y: 32}
    ]
},{
    key: 'Jebel Ali',
    'color' : COLOR_ORANGES,
    values: [
        { x:"Allocated", y: 33}, { x:"Unallocated", y: 76}, { x:"Unallocated Expired", y: 82}, { x:"Expiring within 10 days", y: 67}, { x:"Floating", y: 61}, { x:"Hub Inventory", y: 44},{ x:"Total Inventory", y: 15}

    ]
}];

nv.addGraph({
    generate: function() {
        var stackedBarChart = nv.models.multiBarChart()
            .stacked(true)
            .showControls(false)

        stackedBarChart.yAxis.tickFormat(d3.format(',.0f'));

        var svg = d3.select('#nv-stacked-bar-chartmy')
        .append('svg')
        .datum(stackedBarChartData);
        svg.transition().duration(0).call(stackedBarChart);
        return stackedBarChart;
    }
});

一些标签不可见。如果我增加图表的宽度，则可以看到所有x轴标签。但是我不想增加大小。还有其他方法可以做到这一点吗？

Answer 1

不幸的是，svg文本保持内联，并且需要更复杂的代码才能将文本分为两行。多行轴标签的示例可以在这里找到：https://bl.ocks.org/mbostock/7555321。

如果轴标签不太长，则有两种更简单的替代解决方案：

减小标签字体的大小。在return stackedBarChart;语句之前添加代码：

var ticks = d3.select('.nv-x').selectAll('.tick'); //select the ticks on the x-axis
ticks.select('text')
 .style('opacity', '1') //unhide the labels
 .style('font-size', 8); //change the font-size

其他选项是旋转标签。在return stackedBarChart;语句之前添加代码：

 svg.attr('height', 400); //increase the height of the svg to make room for the labels
 var ticks = d3.select('.nv-x').selectAll('.tick');
 ticks.selectAll('text')
  .attr('transform', 'translate(-10,10) rotate(-90)') //rotates and shifts the text a bit
  .style('text-anchor', 'end') //sets the text to align to the end
  .style('opacity', 1); //makes all the labels visible

您也可以将两者结合使用。

D3堆叠的条形图无法看到完整的x轴标签

1 个答案: