Question

我是d3 js的初学者，因此在时间刻度轴上移动x轴刻度是有问题的，因为在时间刻度轴中没有像序数轴一样的范围，这允许给出这样的outerspacepadding .rangeBound [（0，width），0.5] 那么就像我在给定的照片中提到的那样，有什么方法可以改变4月份的位置

以下是此上述折线图的简要代码..

    x = d3.time.scale()
      .domain(d3.extent(curr_data, function(d) { return formatDate.parse(d.year) ; }))
      .range([0, width]);

 y = d3.scale.linear()
        .domain([0, d3.max(curr_data, function(d) { return d.value; })])      
        .range([height, 0]);

      var xAxis = d3.svg.axis()
      .scale(x)
        .tickSize(4,2,0)
      .orient("bottom");

   var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .innerTickSize(-width)
       .outerTickSize(0)    
    .tickPadding(5);

        chart.append("g")
      .attr("class", "x axis x-axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
       .selectAll("text")   
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-65)");

 chart.append("g")
        .attr("class", "y axis y-axis")
        .call(yAxis);

Answer 1

现在您正在使用d3.extent来设置时间范围的下限和上限，并且您获得的结果是预期的结果。例如，如果我们将第一个日期设置为2016年4月，将最后一个日期设置为2017年4月，那么这就是我们所拥有的轴：

＆＃13;

var svg = d3.select("svg");

var dates = [new Date(2016, 3, 1), new Date(2017, 3, 1)]

var scale = d3.time.scale()
	.domain(dates)
  .range([30,470]);
  
var axis = d3.svg.axis()
	.scale(scale)
  .orient("bottom")
  .tickFormat(function(d){
  return d3.time.format("%b")(d)
  });
  
svg.append("g")
	.attr("transform", "translate(0,50)")
  .call(axis)

＆＃13;

line, path {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

＆＃13;

<script src="//d3js.org/d3.v3.min.js"></script>
<svg width="500" height="100"></svg>

＆＃13;

因此，如果您想将April移动到May的位置，而不会弄乱轴本身，最好的办法就是从较低的域限制中减去1个月（添加{{1}在那个轴的开头）：

Mar

这里，.domain([d3.time.month.offset(d3.min(dates), -1), d3.max(dates)])是我的数据数组。只需将其替换为dates或您拥有的任何数据数组。

结果如下：

＆＃13;

curr_data

＆＃13;

var svg = d3.select("svg");

var dates = [new Date(2016, 3, 1), new Date(2017, 3, 1)]

var scale = d3.time.scale()
  .domain([d3.time.month.offset(d3.min(dates), -1), d3.max(dates)])
  .range([30, 470]);

var axis = d3.svg.axis()
  .scale(scale)
  .orient("bottom")
  .tickFormat(function(d) {
    return d3.time.format("%b")(d)
  });

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

＆＃13;

line,
path {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

＆＃13;

此外，如果您不想查看<script src="//d3js.org/d3.v3.min.js"></script> <svg width="500" height="100"></svg>，则可以删除第一个标记：

＆＃13;

Mar

＆＃13;

var svg = d3.select("svg");

var dates = [new Date(2016, 3, 1), new Date(2017, 3, 1)]

var scale = d3.time.scale()
  .domain([d3.time.month.offset(d3.min(dates), -1), d3.max(dates)])
  .range([30, 470]);

var axis = d3.svg.axis()
  .scale(scale)
  .orient("bottom")
  .tickFormat(function(d,i) {
    if(i){
    return d3.time.format("%b")(d)
    } 
  });

svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis)

＆＃13;

line,
path {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

＆＃13;

在x轴上给出outerspacepadding，时间刻度为d3 js

1 个答案: