多行中的 D3 折线图轴文本标签

Posted 2023-02-22

【中文标题】多行中的 D3 折线图轴文本标签

【英文标题】：D3 line chart axis text labels in multi line

【发布时间】：2015-09-25 10:20:50

【问题描述】：

I have a line chart built in d3.js。我需要一些定制方面的帮助。我希望将 x 轴文本标签分成两行。 我想要一行中的日期和另一行中的月份。

当前图表在一行中有“12 月 14 日”。

目前的图表：

x 轴标签在这里分成 2 行。日期和月份在 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);

【问题讨论】：

This example 应该会有所帮助。

谢谢拉尔斯。会检查的。

【参考方案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。

【讨论】：

非常感谢您的帮助马克。它按预期工作。