Javascript 水平条形图d3.js中y轴上未显示的文本

我有csv：

Vendor,Units2016,Share2016,Units2015,Share2015
Samsung,"306,446.60",20.5,"320,219.70",22.5
Apple,"216,064.00",14.4,225850.6,15.9
Huawei,"132,824.90",8.9,"104,094.70",7.3
Oppo,"85,299.50",5.7,"39,489.00",2.8
BBK Communication,"72,408.60",4.8,"35,291.30",2.5
Others,"682,313.30",45.6,"698,955.10",49.1

我想在这里实现的是在y轴上显示供应商名称，在x轴上显示Share2016数据

所需布局：

我已成功显示条形图：

---

但我想不出这是文本吗？我做错了什么？我一直在尝试添加yAxis=d3.axisLeft（heightScale）.tickValues（data），但它不起作用。请提供帮助。

文本将永远不会显示，因为您正在将它们附加到

元素

但是，您甚至不需要将文本作为单独的元素追加。由于已经有了刻度，只需使用轴生成器即可：

var yAxis = d3.axisLeft(heightScale);

var gX = svg.append("g")
    .attr("transform", "translate(" + margin.left + "0,)")
    .call(yAxis);

以下是轴的代码：

var csv=`供应商，2016年单位，2016年单位，2015年单位，2015年单位
三星，“306446.60”，20.5，“320219.70”，22.5
苹果，“216064.00”，14.4225850.6,15.9
华为，“132824.90”，8.9，“104094.70”，7.3
Oppo，“85299.50”，5.7，“39489.00”，2.8
BBK通讯，“72408.60”，4.8，“35291.30”，2.5
其他，“682313.30”、45.6、“698955.10”、49.1`；
var fullw=320；
var-fullh=240；
var保证金={
排名：1，
右:25,，
底数：25，
左：120
}
var widthScale=d3.scaleLinear（）
.范围（[0，全宽]）；
var heightScale=d3.scaleBand（）
.rangeRound（[0，fullh]）
.填充器（0.2）；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，全宽+边距。左+边距。右）
.attr（“高度”，全高+页边距。顶部+页边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
var数据=d3.csvParse（csv）；
var barcolor=d3.scaleLinear（）
.domain（[0，d3.max（数据，函数（d））{
回报率+d.Share2016；
})])
.范围（[“#E6F5FF”，“蓝色”]）
.插值（d3.插值EHCL）；
widthScale.domain（[0，d3.max（数据，函数（d））{
回报率+d.Share2016；
})]);
heightScale.domain（数据）map（函数（d）{
返回d.供应商；
}));
var bar=svg.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“x”，0）
.attr（“y”，函数（d）{
返回高度刻度（d.供应商）；
})
.attr（“宽度”，函数（d）{
收益率范围（+d.Share2016）；
})
.attr（“高度”，heightScale.bandwidth（））
.样式（“填充”，功能（d，i）{
返回颜色（i）；
});
var yAxis=d3.axisLeft（高度刻度）。滴答器（0）；
var gX=svg.append（“g”）
.attr（“变换”、“平移”（+margin.left+“0，））
.呼叫（yAxis）
“我想不出是文本”：您的变量
条
是
rect
元素的选择，您不能将文本附加到矩形，但可以将两者都附加到
g
。谢谢。这样地？var group=svg.append（“g”）；变量条=组.append（“rect”）.attr（“x”）.attr（“y”）.attr（“宽度”）.attr（“高度”）；var text=group.append（“text”）.text（）。虽然这只是该方法的一个潜在补充，但您可以在追加时为每个
g
定义一个变换，这样您就可以追加相对于变换的固定x、y值的条形图和文本。谢谢您，非常感谢！但是如果我不想要轴心呢。你能看看我的要点吗：为什么我的文本显示不正确？我的意思是如何在不创建轴的情况下拉伸文本并使其适当显示？要定位文本，请在y属性中使用
heightScale（d.Vendor）
。
var yAxis = d3.axisLeft(heightScale);

var gX = svg.append("g")
    .attr("transform", "translate(" + margin.left + "0,)")
    .call(yAxis);