D3线图多行轴文本标签

Question

我用d3.js做了一张折线图，需要一些定制帮助。我想将x轴文本标签拆分成两行，日期在一行，月份在另一行。

现在的图表中，“14 Dec”在一行中。

现有的图表：

这里的x轴标签被拆分为两行。日期和月份分别在两行中。

期望的x轴：

Codepen链接

        var xScale = d3.time.scale().domain([data[0][xkeyVal], data[data.length - 1][xkeyVal]]).range([margin.left, width]);

        var yScale = d3.scale.linear().domain([0, d3.max(data, function(d) {
                    return d[ykeyVal];
                })]).range([height, margin.left]);

       var xAxisGen = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom")
                    .ticks(_config.keys.xAxis.ticks)
                    .tickFormat(d3.time.format("%d %b")) 
                    .tickSize(0);

        var yAxisGen = d3.svg.axis()
              .scale(yScale)
              .orient("left")
              .tickValues(_config.keys.yAxis.tickValues.length > 0 ? _config.keys.yAxis.tickValues : 1)
        .tickSize(0);

- Roydon D' Souza

---

这个例子应该会有所帮助：http://bl.ocks.org/mbostock/7555321。 - Lars Kotthoff

谢谢Lars，我会去看一下的。 - Roydon D' Souza

Answer 1

在生成轴之后，我会这样做：

        svg.append("svg:g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," +height + ")")

          .call(_config.xAxisGen)
          .selectAll('.x .tick text') // select all the x tick texts
          .call(function(t){                
            t.each(function(d){ // for each one
              var self = d3.select(this);
              var s = self.text().split(' ');  // get the text and split it
              self.text(''); // clear it out
              self.append("tspan") // insert two tspans
                .attr("x", 0)
                .attr("dy",".8em")
                .text(s[0]);
              self.append("tspan")
                .attr("x", 0)
                .attr("dy",".8em")
                .text(s[1]);
            })
        });

更新示例。

- Mark

---

非常感谢你的帮助，马克。它按预期工作。 - Roydon D' Souza