自定义刻度，值和格式

Question

我正在尝试在D3的水平轴的最左侧和右侧创建两个自定义刻度。

我想用于刻度的标签不是来自我的任何数据 - 我只想添加“ 2015年第1季度”和“ 2015年第2季度”代替通常从xScale拉入的任何东西。

这是fiddle以及我用来构建xAxis的代码。

现在我的轴上没有任何东西显示蜱 - 数据似乎是从tickFormat函数返回但它没有显示，所以我在这一点上感到困惑。我无法弄清楚我哪里出错了。

var xAxis = d3.svg.axis().orient("bottom")
        // .ticks(2)
        .tickValues([2015, 2016])
        .tickFormat(function(d) {
          console.log("Q1 " + d);
          return "Q1" + d;
        })
        .outerTickSize(0);

Answer 1

这里的问题是您正在设置数字刻度值

.tickValues([2015, 2016])

基本上会尝试使用2015年和2016年的值创建一个滴答。

由于您的xAxis比例设置为使用以下内容：

xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));

仅从您的数据对象返回一个月，因此由于值[monthValue]与[yearValue]之间的差异，滴答在渲染但在视口之外。

如果您打算使用时标，您需要为该范围的域提供适当的输入。

// X Axis Scale
var xScale = d3.time.scale().range([0, innerWidth]);

// Axis Function
var xAxis = d3.svg.axis()
.orient("bottom")
.scale(xScale)
.tickFormat(function(d) { // Getting the value of the tick :)
    return "Q1:" + mS[d.getMonth()];
});

/*
 * Setting the domain of the x scale with a correct Date value
 *
 * We use nested[0].values which iterates over the values of just
 * one hotel and the corresponding dates since the dates are the 
 * same for the remaining hotels.
 */
xScale.domain(d3.extent(nested[0].values, function (d){
    var f = new Date('2012', (d[xColumn] - 1), '01');
    return f;
}));

并且不要忘记在您的区域功能中使用相同的方法。

var area = d3.svg.area()
.x(function(d) {
    return xScale( new Date('2012', (d[xColumn] - 1), '01'))
})
.y0(function(d) { return yScale(d.y0); })
.y1(function(d) { return yScale(d.y0 + d.y); });

var mS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
var outerWidth = 1000;
var outerHeight = 250;
var margin = { left: 55, top: 5, right: 100, bottom: 60 };

var xColumn = "month";
var yColumn = "tours";
var colorColumn = "name";
var areaColumn = colorColumn;

var xAxisLabelText = "Month";
var xAxisLabelOffset = 48;

var innerWidth  = outerWidth  - margin.left - margin.right;
var innerHeight = outerHeight - margin.top  - margin.bottom;

var svg = d3.select("body").append("svg")
  .attr("width", outerWidth)
  .attr("height", outerHeight);
var g = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xAxisG = g.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + innerHeight + ")")
var xAxisLabel = xAxisG.append("text")
  .style("text-anchor", "middle")
  .attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
  .attr("class", "label")
  .text(xAxisLabelText);

var colorLegendG = svg.append("g")
  .attr("class", "color-legend")
  .attr("transform", "translate(403, 5)");

var xScale = d3.time.scale().range([0, innerWidth]);
var yScale = d3.scale.linear().range([innerHeight, 0]);
var colorScale = d3.scale.category10();

var xAxis = d3.svg.axis().orient("bottom").scale(xScale)
  .tickFormat(function(d, i, e) {
    return "Q1:" + mS[d.getMonth()];
  });


var stack = d3.layout.stack()
  .y(function (d){ return d[yColumn]; })
  .values(function (d){ return d.values; });

var area = d3.svg.area()
  .x(function(d) {
    return xScale( new Date('2012', (d[xColumn] - 1), '01'))
  })
  .y0(function(d) { return yScale(d.y0); })
  .y1(function(d) { return yScale(d.y0 + d.y); });



function render(data){
  var nested = d3.nest()
    .key(function (d){ return d[areaColumn]; })
    .entries(data);

  colorScale.domain(nested.map(function (d){ return d.key; }));

  // Reversed the order here so the order matches between legend & areas.
  var layers = stack(nested.reverse());
  xScale.domain(d3.extent(nested[0].values, function (d){
    var f = new Date('2012', (d[xColumn] - 1), '01');
    return f;
  }));
  yScale.domain([0,
    d3.max(layers, function (layer){
      return d3.max(layer.values, function (d){
        return d.y0 + d.y;
      });
    })
  ]);

  var total = d3.sum(layers, function(layer) {
    return d3.sum(layer.values, function(d) {
      return d.tours;
    });
  });

  var paths = g.selectAll(".chart-area").data(layers);
  paths.enter().append("path").attr("class", "chart-line");
  paths.exit().remove();
  paths.attr("d", function (d){ return area(d.values); })
  .attr("fill", function (d){ return colorScale(d.key); });

  xAxisG.call(xAxis);

  svg.append("g")
    .attr("class", "legend")
    .selectAll("text")
    .data(layers)
    .enter().append("text")
    .text(function(d) { return (d.key) + ' (' + d.key + ')'; })
    .attr('fill', function(d) { return colorScale(d.key); })
    .attr('y', function(d, i) { return 20 * (i + 1); })
    .attr('x', "0");
}



var toursByHotel = [
       {
         "name": "Marriott",
         "month": 1,
         "tours": 10
       },
       {
         "name": "Marriott",
         "month": 2,
         "tours": 15
       },
       {
         "name": "Marriott",
         "month": 3,
         "tours": 8
       },
       {
         "name": "Marriott",
         "month": 4,
         "tours": 12
       },
       {
         "name": "Marriott",
         "month": 5,
         "tours": 18
       },
       {
         "name": "Marriott",
         "month": 6,
         "tours": 25
       },
       {
         "name": "Marriott",
         "month": 7,
         "tours": 40
       },
       {
         "name": "Marriott",
         "month": 8,
         "tours": 33
       },
       {
         "name": "Marriott",
         "month": 9,
         "tours": 25
       },
       {
        "name": "Marriott",
         "month": 10,
         "tours": 21
       },
       {
        "name": "Marriott",
         "month": 11,
         "tours": 18
       },
       {
        "name": "Marriott",
         "month": 12,
         "tours": 14
       },
       {
         "name": "Springhill",
         "month": 1,
         "tours": 10
       },
       {
         "name": "Springhill",
         "month": 2,
         "tours": 15
       },
       {
         "name": "Springhill",
         "month": 3,
         "tours": 8
       },
       {
         "name": "Springhill",
         "month": 4,
         "tours": 12
       },
       {
         "name": "Springhill",
         "month": 5,
         "tours": 18
       },
       {
         "name": "Springhill",
         "month": 6,
         "tours": 25
       },
       {
         "name": "Springhill",
         "month": 7,
         "tours": 40
       },
       {
         "name": "Springhill",
         "month": 8,
         "tours": 33
       },
       {
         "name": "Springhill",
         "month": 9,
         "tours": 25
       },
       {
        "name": "Springhill",
         "month": 10,
         "tours": 21
       },
       {
        "name": "Springhill",
         "month": 11,
         "tours": 18
       },
       {
        "name": "Springhill",
         "month": 12,
         "tours": 14
       },
       {
         "name": "Residence",
         "month": 1,
         "tours": 10
       },
       {
         "name": "Residence",
         "month": 2,
         "tours": 15
       },
       {
         "name": "Residence",
         "month": 3,
         "tours": 8
       },
       {
         "name": "Residence",
         "month": 4,
         "tours": 12
       },
       {
         "name": "Residence",
         "month": 5,
         "tours": 18
       },
       {
         "name": "Residence",
         "month": 6,
         "tours": 25
       },
       {
         "name": "Residence",
         "month": 7,
         "tours": 40
       },
       {
         "name": "Residence",
         "month": 8,
         "tours": 33
       },
       {
         "name": "Residence",
         "month": 9,
         "tours": 25
       },
       {
        "name": "Residence",
         "month": 10,
         "tours": 21
       },
       {
        "name": "Residence",
         "month": 11,
         "tours": 18
       },
       {
        "name": "Residence",
         "month": 12,
         "tours": 14
       },
       {
         "name": "Courtyard",
         "month": 1,
         "tours": 10
       },
       {
         "name": "Courtyard",
         "month": 2,
         "tours": 15
       },
       {
         "name": "Courtyard",
         "month": 3,
         "tours": 8
       },
       {
         "name": "Courtyard",
         "month": 4,
         "tours": 12
       },
       {
         "name": "Courtyard",
         "month": 5,
         "tours": 18
       },
       {
         "name": "Courtyard",
         "month": 6,
         "tours": 25
       },
       {
         "name": "Courtyard",
         "month": 7,
         "tours": 40
       },
       {
         "name": "Courtyard",
         "month": 8,
         "tours": 33
       },
       {
         "name": "Courtyard",
         "month": 9,
         "tours": 25
       },
       {
        "name": "Courtyard",
         "month": 10,
         "tours": 21
       },
       {
        "name": "Courtyard",
         "month": 11,
         "tours": 18
       },
       {
        "name": "Courtyard",
         "month": 12,
         "tours": 14
       },
       {
         "name": "Renaissance",
         "month": 1,
         "tours": 10
       },
       {
         "name": "Renaissance",
         "month": 2,
         "tours": 15
       },
       {
         "name": "Renaissance",
         "month": 3,
         "tours": 8
       },
       {
         "name": "Renaissance",
         "month": 4,
         "tours": 12
       },
       {
         "name": "Renaissance",
         "month": 5,
         "tours": 18
       },
       {
         "name": "Renaissance",
         "month": 6,
         "tours": 25
       },
       {
         "name": "Renaissance",
         "month": 7,
         "tours": 40
       },
       {
         "name": "Renaissance",
         "month": 8,
         "tours": 33
       },
       {
         "name": "Renaissance",
         "month": 9,
         "tours": 25
       },
       {
        "name": "Renaissance",
         "month": 10,
         "tours": 21
       },
       {
        "name": "Renaissance",
         "month": 11,
         "tours": 18
       },
       {
        "name": "Renaissance",
         "month": 12,
         "tours": 14
       }
     ];

     render(toursByHotel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>