Javascript d3 xAxis与文本的交互作用

我有一个问题，它是由

g'轴元素和一系列
text`元素的交互作用引起的。我试图构建一个只有日期x轴的图形，其中正方形沿着相应的日期x坐标定位，但在同一y轴

我正在研究的代码如下：

var dataset = [

            {'startYear' : '2004-01-12',
            'label' : 'green'},
            {'startYear' : '2005-06-07',
            'label' : 'red'},
            {'startYear' : '2010-03-04',
            'label' : 'red'},
            {'startYear' : '2010-07-28',
            'label' : 'yellow'}

          ];

          var w = 750;
          var h = 500;
          var padding = 30;


          var svg = d3.select(element[0])
                      .append('svg')
                      .attr('width',w)
                      .attr('height',h);

          var xScale = d3.time.scale()
                        .domain([new Date('2004-01-01'),new Date('2014-12-31')])
                        .range([padding,w-padding*2]);

          var xAxis = d3.svg.axis()
                        .scale(xScale)
                        .orient('bottom')
                        .ticks(d3.time.years)
                        .tickFormat(d3.time.format('%Y'));


          var axisStyle = {'fill': 'none', 'stroke': 'black','shape-rendering': 'crispEdges','font-family':'sans-serif','font-size': '11px'};

          svg.append('g')
                .style(axisStyle)
                .attr('transform', 'translate(0,' + (h - padding) + ')')
                .attr('text-anchor', 'end')
                .call(xAxis);

          svg.selectAll('rect')
             .data(dataset)
             .enter()
             .append('rect')
             .attr('x',function(d){return xScale(new Date(d.startYear));})
             .attr('y',h-padding*2.5)
             .attr('height',20)
             .attr('width',20)
             .attr('fill',function(d){return d.label;});

          svg.selectAll('text')
            .data(dataset)
            .enter()
            .append('text')
            .attr('x',0)
            .attr('y',30)
            .text('monkeys');

由于某些原因，
文本
元素不会呈现在屏幕上。在调查问题的原因时，我发现注释x轴的
g
元素是一个解决方案，但显然我需要保留xaxis。为什么会这样？有解决办法吗？
问题是您首先要添加轴。这意味着在运行代码添加标签时，DOM中已经有
text
元素。因此，
svg.selectAll（'text'）
选择它们。然后D3将传递给
.data（）
的数据与它们匹配，并为每个数据项找到匹配项。因此，
.enter（）
选项为空

要修复此问题，请为这些标签指定一个特殊类，使您能够将其与其他
文本
元素区分开来：

svg.selectAll('text.label')
        .data(dataset)
        .enter()
        .append('text')
        .attr("class", "label")
        .attr('x',0)
        .attr('y',30)
        .text('monkeys');