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

Question

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

我在条形图 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");
  });