将d3.v4.js条形图的标题划分为两行或更多行

Question

我正在使用d3.v4图表，他们工作得很好，但我的条形图的标题太长了，我想把标题划分为两行。

svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end");    
var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("transform", function (d) {
        return "translate(0," + y(d.State) + ")";
    })

d.State包含标题，这是我到目前为止所尝试的内容：

return "translate(0," + y(d.State.text().split("+")) + ")";

＆＃39; +＆＃39;标志在标题中，我插入了将标题分成两半。

Answer 1

enter image description here 这段代码对我有用

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");

  var state = svg.selectAll(".state")
      .data(data)
      .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) {
         return "translate(0," + y(d.State) + ")"; 
       })

  $('.y .tick text')
  .each(function(d){
      var self = d3.select(this);
      var lines = self.text().split("+");
      self.text("");
      self.append("tspan")
        .attr("x", -8)
        .attr("dy", "0em")
        .attr('font-weight', 'bold')
        .text(lines[0]);
      self.append('tspan')
        .attr("x", -8)
        .attr("dy", ".92em")
        .style('fill', '2E3092')
        .text(lines[1]);
    })