Arrays d3.js帮助在简单条形图上动态标记Y轴

数据位于对象数组中，其中

Data=[object{name:“FIRST TECH”，value:2477}]
技术名称会发生变化，我正试图将它们放在它们关联的栏的左侧

我不确定我是否在最佳实践中这样做，但当我将文本附加到边上时，它是不可见的。我尝试过更改类名，更改颜色，z索引，位置：绝对，它始终保持隐藏

我需要做什么才能将标签正确地贴在侧面

代码：


氢{
文本对齐：居中；
左边距：自动；
右边距：自动；
}
.abcxyz{
填充：黑色；
颜色：#000；
文本锚定：结束；
}
.图表{
宽度：800px；
显示：块；
保证金：自动；
背景色：#c7d9e8；
}
.chart rect{
填充：钢蓝；
}
.chart rect：悬停{
填充物：棕色；
}
.价值观{
填充物：白色；
字体：12px无衬线；
文本锚定：结束；
}
$（文档）.ready（函数（）{
var返回数据；
$.ajax({
url:“”，
键入：“GET”，
成功：功能（数据）{
data=JSON.parse（数据）；
设置返回数据（数据）；
绘图（数据）；
},
错误：函数（数据）{
控制台日志（“错误”）；
}
});
});
函数集返回数据（数据）{
返回数据=数据；
console.log（返回_数据）；
}
函数formatGraphData（数据）{
var newData=newarray（）；
对于（数据中的x）{
tmp={name:x，value:data[x].length}；
newData.push（tmp）；
}
sort（函数（a，b）{返回b.value-a.value}）；
返回新数据；
}
函数绘图图（rawData）{
rawData=formatGraphData（rawData）；
可变宽度=800，
杆高=30；
var x=d3.scale.linear（）
.domain（[0，rawData[0].value]）
.范围（[10，宽度]）；
变量y=d3.scale.linear（）
.domain（rawData.map（函数（d）{return d.name}））
.range（[0，barHeight*rawData.length]）；
var图表=d3。选择（“图表”）
.attr（“高度”，barHeight*rawData.length）；
变量条=图表。选择全部（“g”）
.数据（原始数据）
.enter（）.append（“g”）
.attr（“transform”，函数（d，i）{return“translate（0，+i*barHeight+”）；}）；
附加条（“文本”）
.attr（“类”、“abcxyz”）
.attr（“y”，酒吧高度/2）
.text（函数（d）{返回d.name}）；
附加条（“rect”）
.attr（“高度”，酒吧高度-1）
.attr（“宽度”，函数（d）{返回x（d.value）；}）；
附加条（“文本”）
.attr（“类”、“值”）
.attr（“x”，函数（d）{返回x（d.value）-3；}）
.attr（“y”，酒吧高度/2）
.attr（“dy”，“.35em”）
.text（函数（d）{返回d.value；}）；
}
技术术语的使用频率
SVG不知道
z-order
或任何类似的东西。元素将按添加顺序显示。因此，要使文本显示在条的顶部，请先绘制条，然后绘制文本

 <style>
    h2{
    text-align:center;
    margin-left: auto;
    margin-right: auto;
}

.abcxyz{
    fill:black;
    color:#000;
    text-anchor: end;
}

.chart {
    width:800px;
    display:block;
    margin:auto;
    background-color:#c7d9e8;
}
.chart rect {
  fill: steelblue;
}

.chart rect:hover{
    fill:brown;
}

.values {
  fill: white;
  font: 12px sans-serif;
  text-anchor: end;
}
</style>

<script>
$(document).ready(function(){
    var return_data;
    $.ajax({
        url: '<?php echo site_url('metrics/getTechDocs') ?>',
        type: 'GET', 
        success: function(data){
            data = JSON.parse(data);
            set_return_data(data);          
            drawGraph(data);
        },
        error: function(data){
            console.log("error");
        }
    });
});

function set_return_data(data){
    return_data = data;
    console.log (return_data);
}

function formatGraphData(data){
 var newData = new Array();
     for(x in data){
        tmp = {name: x , value: data[x].length};
        newData.push(tmp);
     }
     newData.sort(function(a,b){return b.value - a.value} );
 return newData; 
}

function drawGraph(rawData){
    rawData = formatGraphData(rawData);

var width = 800,
    barHeight = 30;

var x = d3.scale.linear()
    .domain([0, rawData[0].value])
    .range([10, width]);

var y = d3.scale.linear()
    .domain(rawData.map(function(d){return d.name}))
    .range([0, barHeight * rawData.length]);

var chart = d3.select(".chart")
    .attr("height", barHeight * rawData.length);

var bar = chart.selectAll("g")
    .data(rawData)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("text")
    .attr("class", "abcxyz")
    .attr("y", barHeight / 2 )
    .text(function(d){return d.name});

bar.append("rect")
    .attr("height", barHeight - 1)
    .attr("width", function(d){return x(d.value);});

bar.append("text")
    .attr("class", "values")
    .attr("x", function(d) { return x(d.value) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d){return d.value;});
}
</script>

<div>
    <h2>Frequency of Technology Terms</h2>
    <svg class="chart"></svg>
</div>