Question

我正在学习如何使用D3，但是我已经在我的第一个图表中找不到为什么x轴位于顶部而不是底部。我设置了东方（'底部'）并由左边距和上边距平移，并且它相对于平移正确定位，但它出现在条形图的顶部。任何人都可以看到问题是什么？代码看起来类似于一堆示例，所以我不确定它为什么不能正常工作。

   // Ordinal scale to transform data to fit width of the chart
   // -- NOTE: ordinal is equivalent to an ordered list
   xScale = d3.scale.ordinal()
              .domain(d3.range(0, data.length))
              .rangeBands([0, config.width],
                          config.rangeBandPadding,
                          config.rangeBandOuterPadding);

   // Quantitative linear scale to transform data to fit height of the chart
   // -- NOTE: quantitative is equivalent to an unordered list
   yScale = d3.scale.linear()
              .domain([0, d3.max(data)])
              .range([0, config.height]);

   // Create the <svg> canvas with chart group
   svg = D3Service.getSvgCanvas($element[0],
                                config.outerWidth,
                                config.outerHeight,
                                config.margin)

   // Add data bars to the chart and remap to scale to fit chart dimensions
   // -- NOTE: Select all rects (that don't exist yet), bind the data to the selection, append
   // the bound selections within a chart group and apply scaled dimensions, and finally add
   // events to capture user interactions with the chart and transitions to animate the chart
   svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('width', xScale.rangeBand())
      .attr('height', 0) // initialized to zero to allow for translation
      .attr('x', function (d, i) {
          return xScale(i);
      })
      .attr('y', config.height) // why???

      // Bind events to the chart
      .on('mouseover', function (d) {

      })
      .on('mouseout', function (d) {

      })
      .on('click', function (d) {

      });

   // Perform transitions on data bars as they are added to the chart
   svg.selectAll('rect')
      .transition()
      .attr('y', function (d) {
          return config.height - yScale(d);
      })
      .attr('height', function (d) {
          return yScale(d);
      })
      .delay(function (d, i) {
          return i * config.transitionDelayFactor;
      })
      .duration(500)
      .ease('bounce');


   // Uses range of xScale domain and filters the data bars to figure who to add a tick to
   // does a number have a zero remainder and get a number every 5th bar

   // From the range of
   xAxis = d3.svg.axis()
             .scale(xScale)
             .orient('bottom')
             .ticks(data.length);

   xGuide = d3.select('svg')
              .append('g')
              .attr('class', 'axes x-axis')
              .call(xAxis)
              .attr('transform',
                    D3Service.getTranslation(config.margin.left, config.margin.top));

   yGuideScale = d3.scale.linear().domain([0, d3.max(data)])
                   .range([config.height, 0]);

   yAxis = d3.svg.axis().scale(yGuideScale)
             .orient('left').ticks(10)

   yGuide = d3.select('svg')
              .append('g')
              .attr('class', 'axes y-axis')
              .call(yAxis)
              .attr('transform',
                    D3Service.getTranslation(config.margin.top, config.margin.left));

Answer 1

乍一看，在查看你的代码时，我会说这是因为你没有定位＆＃34; g＆＃34;包含x轴的元素。所以你选择你的svg元素，然后添加一个＆＃34; g＆＃34;你的svg中的元素，但在你的图表顶部，然后你添加你的轴，然后你执行看起来像你的轴上的翻译，这是由g元素包含的。

您需要将g元素转换为图表的底部：

.append("g")
  .attr("transform", "translate(0, height-offset)")
  .(rest of your code)

如果我没记错的话，新的svg元素会重叠前面的元素，从svg原点开始，即左上角。由于你的translate函数可能对轴本身做了一些事情（call（xAxis）返回你的轴元素我认为，因此translate函数适用于轴元素），但不适用于分组元素，我认为这就是为什么＆＃34; G＆＃34;元素只停留在左上角。

修改

轴的方向功能定义文本相对于轴线的放置位置。可以找到更多信息here

我希望这是有道理的:-)。

D3 X轴不会出现在底部

1 个答案: