Javascript 图外轴标号

我将按照教程构建堆叠条形图。 y轴标签（“总体”）位于图形中，x轴标签被条隐藏。是否可以将标签移到图形外部，即y轴标签移到线条左侧，x轴标签移到图形起点下方？ 我尝试过各种文本锚定和对齐基线值，但它们似乎从来都不起作用。 我是d3.js的新手，所以请容忍我。 这是添加y轴标签的代码段：

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")
      .text("Population");

---

附加轴标题，如下所示

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .append("text")
  .text("State")
  .attr("transform", function(d) {
    return "translate(" + this.parentNode.getBBox().width / 2 + "," + 50 + ")";
  });


svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .text("Population")
  .attr("transform", function(d) {
    return "translate(" + -50 + "," + this.parentNode.getBBox().height / 2 + ") rotate(-90)";
  });

注意：我已将轴标题放置在轴的中间。为任何位置更改调整变换属性值。希望这有帮助

var保证金={
前20名，
右:20,，
底部：80，
左：90
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.rangeRound（[高度，0]）；
var color=d3.scale.ordinal（）
.范围（[“98abc5”、“8a89a6”、“7b6888”、“6b486b”、“a05d56”、“d0743c”、“ff8c00”）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.tick格式（d3格式（“.2s”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
风险值数据=[{
“国家”：“AL”，
“5岁以下”：310504，
“5至13年”：552339，
“14至17年”：259034，
“18至24年”：450818，
“25至44岁”：1231572，
“45至64岁”：1215966，
“65岁及以上”：641667
}, {
“国家”：“AK”，
“5岁以下”：52083，
“5至13年”：85640，
“14至17年”：42153，
“18至24年”：74257，
“25至44年”：198724年，
“45至64岁”：183159，
“65岁及以上”：50277
}, {
“州”：“AZ”，
“5岁以下”：515910，
“5至13年”：828669，
“14至17年”：362642，
“18至24年”：601943，
“25至44岁”：1804762，
“45至64岁”：1523681，
“65岁及以上”：862573
}, {
“国家”：“AR”，
“5岁以下”：202070，
“5至13年”：343207，
“14至17年”：157204，
“18至24岁”：264160，
“25至44年”：754420，
“45至64岁”：727124，
“65岁及以上”：407205
}, {
“州”：“CA”，
“5岁以下”：2704659，
“5至13年”：4499890，
“14至17年”：2159981，
“18至24年”：3853788，
“25至44岁”：10604510，
“45至64年”：8819342，
“65岁及以上”：4114496
}, {
“国家”：“公司”，
“5岁以下”：358280，
“5至13年”：587154，
“14至17年”：261701，
“18至24年”：466194，
“25至44岁”：1464939，
“45至64岁”：1290094，
“65岁及以上”：511094
}, {
“州”：“CT”，
“5岁以下”：211637，
“5至13年”：403658，
“14至17年”：196918年，
“18至24年”：325110，
“25至44岁”：916955，
“45至64岁”：968967，
“65岁及以上”：478007
}, {
“州”：“德”，
“5岁以下”：59319，
“5至13年”：99496，
“14至17年”：47414年，
“18至24岁”：84464，
“25至44岁”：230183，
“45至64岁”：230528，
“65岁及以上”：121688
}, {
“州”：“DC”，
“5岁以下”：36352，
“5至13年”：50439，
“14至17年”：25225，
“18至24年”：75569，
“25至44年”：193557年，
“45至64岁”：140043，
“65岁及以上”：70648
}];
color.domain（d3.keys（数据[0]）过滤器（函数（键）{
返回键！=“状态”；
}));
data.forEach（函数（d）{
var y0=0；
d、 ages=color.domain（）.map（函数（名称）{
返回{
姓名:姓名,，
y0:y0，
y1:y0+=+d[名称]
};
});
d、 总计=d.ages[d.ages.length-1].y1；
});
数据排序（函数（a，b）{
返回b.总计-a.总计；
});
x、 域（data.map）（函数（d）{
返回d.状态；
}));
y、 域（[0，d3.max（数据，函数（d））{
返回d.total；
})]);
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）
.append（“文本”）
.案文（“国家”）
.attr（“转换”，函数（d）{
返回“translate（“+this.parentNode.getBBox（）.width/2+”，“+50+”）；
});
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.案文（“人口”）
.attr（“转换”，函数（d）{
返回“translate（“+-50+”，“+this.parentNode.getBBox（）.height/2+”）rotate（-90）”；
});
var state=svg.selectAll（“.state”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类别”、“g”）
.attr（“转换”，函数（d）{
返回“translate（“+x（d.State）+”，0）”；
});
state.selectAll（“rect”）
.数据（功能（d）{
返回d.ages；
})
.enter（）.append（“rect”）
.attr（“宽度”，x.rangeBand（））
.attr（“y”，函数（d）{
返回y（d.y1）；
})
.attr（“高度”，功能（d）{
返回y（d.y0）-y（d.y1）；
})
.样式（“填充”，功能（d）{
返回颜色（d.name）；
});
var legend=svg.selectAll（“.legend”）
.data（color.domain（）.slice（）.reverse（））
.enter（）.append（“g”）
.attr（“类”、“图例”）
.attr（“转换”，函数（d，i）{
返回“translate（0，+i*20+”）；
});
图例。追加（“rect”）
.attr（“x”，宽度-18）
.attr（“宽度”，18）
.attr（“高度”，18）
.样式（“填充”，颜色）；
图例。追加（“文本”）
.attr（“x”，宽度-24）
.attr（“y”，9）
.attr（“dy”，“.35em”）
.style（“文本锚定”、“结束”）
.文本（功能（d）{
返回d；
});
正文{
字体：10px无衬线；
}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.酒吧{
填充：钢蓝；
}
.x轴路径{
显示：无；
}