时间戳

首页 > 解决方案 > D3 为什么地图不都是沿着X轴的？

d3.js - D3 为什么地图不都是沿着X轴的？

问题描述

你能告诉我如何解决这个问题吗？见链接。或如何缩短轴：P

https://codepen.io/DeanWinchester88/pen/powwzgL

 var xScale = d3.scale
      .ordinal()
      .domain( data.monthlyVariance.map( (val)  => val.year )
       )
      .rangeRoundBands( [0,width ],  0, 0);
  
    var xAxis = d3.svg
      .axis()
      .scale(xScale)
      .tickValues(
        xScale.domain().filter(function (year) {
          // set ticks to years divisible by 10
          return year % 10 === 0;
        })
      )
        svg
      .append('g')
      .classed('x-axis', true)
      .attr('id', 'x-axis')
      .attr(
        'transform',
        'translate(' + padding.left + ',' + (height + padding.top ) + ')'
      )
      .call(xAxis)

标签： d3.jsscale

解决方案

您可以在 xAxis 上旋转标签，以便它们变得可读：

...
      svg
      .append('g')
      .classed('x-axis', true)
      .attr('id', 'x-axis')
      .attr(
        'transform',
        'translate(' + padding.left + ',' + (height + padding.top ) + ')'
      )
      .call(xAxis)

      .selectAll('text') 
      .attr('transform', 'rotate(90)')
      .style('text-anchor', 'start')
...

您可能需要对填充进行一些调整，并且可以将其放在另一个角度。您可以查看示例以获取更多详细信息

推荐阅读