D3 svg text标签中dx dy属性

1、设置x，y属性定位显示

svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .attr("x",function(d,i){
               return 30+xScale(i);
           })
           .attr("y",function(d,i){
               return 50+500-yScale(d);
           }) 
           .attr("text-anchor","begin")
           .attr("font-size",14)
           .attr("fill","black")
           .text(function(d,i){
               return d;
           });

效果图

 

2、dx，dy是相对于(x,y)的偏移

设置dx，dy

svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .attr("x",function(d,i){
               return 30+xScale(i);
           })
           .attr("y",function(d,i){
               return 50+500-yScale(d);
           }) 
           .attr("dx",function(){
               return xScale.bandwidth()/4;
           })
           .attr("dy",11)
           .attr("text-anchor","begin")
           .attr("font-size",14)
           .attr("fill","black")
           .text(function(d,i){
               return d;
           });

效果图

 

 

 

 去掉dx dy属性，将偏移量加到x，y属性上，效果一样

svg.selectAll("text")
           .data(dataset)
           .enter()
           .append("text")
           .attr("x",function(d,i){
               return 30+xScale(i)+xScale.bandwidth()/4;
           })
           .attr("y",function(d,i){
               return 50+500-yScale(d)+11;
           }) 
           .attr("text-anchor","begin")
           .attr("font-size",14)
           .attr("fill","black")
           .text(function(d,i){
               return d;
           });

效果图