多行

Question

I have a line chart built in d3.js。我需要一些自定义的帮助。我希望将x轴文本标签分成两行。 我希望日期在一行，而月份在另一行。

目前的图表有＆＃34; 14月12日＆＃34;在一行。

目前的图表：

此处x轴标签分为2行。日期和月份分为两个不同的行。

预期的x轴：

Codepen link

        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);

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]);
            })
        });

更新了example。