Question

我正在使用AngularJS，Blur Admin UI和D3图表。在这些帮助下，我创建了PIE，BAR和ROW图表。

我在BAR图表的x轴上有很多数据，并且一个x轴标签与其他标签重叠。现在，我试图将x轴标签显示为垂直。但是我没有解决方案。

HTML

<div class="col-lg-6 col-md-6" ba-panel
    ba-panel-title="BAR Chart" ba-panel-class="with-scroll">
    <div id="state-donations" class=" "></div>
</div>

Controller.JS

BarTypeChart
    .width(450)
    .height(300)
    .colors(barChartColors)
    .dimension(geoType)
    .group(typeOfGeo)
    .margins({top: 10, right: 50, bottom: 30, left: 50})
    .centerBar(false)
    .gap(10)
    .elasticY(true)
    .x(d3.scale.ordinal().domain(geoType))
    .xUnits(dc.units.ordinal)
    .renderHorizontalGridLines(true)
    .renderVerticalGridLines(true)
    .ordering(function(d){return d.value;})
    .yAxis().tickFormat(d3.format("s"));

任何人都可以帮助解决该问题吗？

Answer 1

查看dc.js中的示例，它们都没有在x轴上旋转文本。在D3中，我们也必须自己做

所以绘制图形后，您必须自己做。

var bargraph = d3.select("#barchart"); // or some other method to get the svg of the chart
bargraph.select('.axis.x')
        .attr("text-anchor", "end")
        .selectAll("text")
        .attr("transform", "rotate(-90)")
        .attr("dy", "-0.7em")
        .attr("dx", "-1em");

修改

找到了一个示例，dc.js有一个postRender事件。 https://www.intothevoid.io/data-visualization/row-chart-axis-labels-dc-js/

BarTypeChart.on("postRender", function(chart) {
    chart.select('.axis.x')
         .attr("text-anchor", "end")
         .selectAll("text")
         .attr("transform", "rotate(-90)")
         .attr("dy", "-0.7em")
         .attr("dx", "-1em");
  });

如何垂直旋转D3图表XAxis标签

1 个答案: