Question

我有一个问题，它是由g' axis element and a series of 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');

由于某些原因，text元素未在屏幕上呈现。在调查问题的原因时，我发现注释x轴的g元素是一个解决方案，但显然我需要保留xaxis。为什么会这样？围绕它有解决方案吗？

Answer 1

问题在于您首先添加轴。这意味着，当您运行代码以添加标签时，DOM中已有text个元素。因此，svg.selectAll('text')会选择它们。然后D3将您传递给.data()的数据与它们匹配，并找到每个数据项的匹配项。因此，.enter()选项为空。

要修复，请为这些标签指定一个特殊类，以便将它们与其他text元素区分开来：

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

d3 xAxis和文本之间的交互

1 个答案: