stackedgroupedChart 中的 nvd3 双 X 轴

Question

我正在使用 nvd3 stackedgroupchart，现在我已将单个 X-Axis 列标签更改为多个。我还需要为月份名称添加辅助 X-Axis。我正在使用下面的图表 link

http://bl.ocks.org/4629518

现在我的图表显示如下，

我需要像这样在 X 轴上添加月份，

现在我的 X-Axis 基于以下代码生成：

var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, width], 0.8); 

var xAxis = d3.svg.axis()
    .scale(xScale)
    .tickFormat(function(d) { return dataset[d].shift; })
    .orient("bottom");

请帮助为 X 轴添加辅助标签，

提前致谢，

Answer 1

创建另一个具有地图首选比例的轴

使用copy函数复制比例尺
向比例添加新的域值
创建新轴并添加刻度

调用 (axisNew) 并更改变换值

var x2 = x0.copy();
    x2.domain(["a","b","c","d"]);

var xAxis1 = d3.svg.axis()
    .scale(x2)
    .tickSize(0)
    .orient("bottom");

svg.append("g")
   .attr("class", "x axis")
   .attr("transform", "translate(0," + (height+10) + ")")
   .call(xAxis1);

stackedgroupedChart 中的 nvd3 双 X 轴

nvd3 dual X-Axis in stackedgroupedChart

javascript

html

angularjs

d3.js

nvd3.js