Javascript D3.js：向带有负值的条形图添加时间轴

我有一个条形图，其中x轴是时间。条形图支持负值，我在下面有一个额外的轴来显示x值。但是，显示的是数值，而不是日期

代码如下：

data = [{"value": 10, "date": "20150824"},
        {"value": -21, "date": "20150924"},
        {"value": 7, "date": "20151024"},
        {"value": 12, "date": "20151124"},
        {"value": 33, "date": "20151224"},
        {"value": -10, "date": "20160124"},
        {"value": -10, "date": "20160224"},
        {"value": -2, "date": "20160324"},
        {"value": 17, "date": "20160424"},
        {"value": -4, "date": "20160524"},
        {"value": 6, "date": "20160864"},
        {"value": 23, "date": "20160724"},
        {"value": 13, "date": "20160824"},
        {"value": -19, "date": "20160924"},
        {"value": -8, "date": "20161024"},
        {"value": -2, "date": "20161124"},
        {"value": 12, "date": "20161224"}
    ]

var margin = {top: 30, right: 10, bottom: 10, left: 30},
    width = 960 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var y0 = Math.max(Math.abs(d3.min(data, function(d) { return +d.value; })), Math.abs(d3.max(data, function(d) { return +d.value; })));

var parseDate = d3.time.format("%Y%m%d").parse;

 data.forEach(function(d) {
        d.date = parseDate(d.date);
  });


var y = d3.scale.linear()
    .domain([-y0, y0])
    .range([height,0])
    .nice();

var x = d3.scale.ordinal()
    .domain(d3.range(data.length))
    .rangeRoundBands([0, width], .2);


var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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

   bars = svg.selectAll(".bar")
    .data(data);

 bars.enter().append("rect")
    .attr("class", function(d) { return d.value < 0 ? "bar negative" : "bar positive"; })
    .attr("x", function(d, i) { return x(i); })
    .attr("width", x.rangeBand())
    .attr("fill", "#A9A9A9"});

 bars.transition()
      .duration(1000)
      .delay(function (d, i) {
        return i * 40;
      })
    .attr("y", function(d) { return y(Math.max(0, d.value)); })
    .attr("height", function(d) {return Math.abs(y(d.value) - y(0)); });

svg.append("g")
    .attr("class", "x axis")
    .call(yAxis);



svg.append("g")
    .attr("class", "y axis")
  .append("line")
    .attr("y1", y(0))
    .attr("y2", y(0))
    .attr("x1", 0)
    .attr("x2", width);

svg.append("g")
      .attr("class", "xx axis")
      .attr("transform", "translate(0," + parseInt(height+ 30   ).toString() + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" )

 bars
    .exit().remove();

data=[{“value”：10，“date”：“20150824”}，
{“值”：-21，“日期”：“20150924”}，
{“值”：7，“日期”：“20151024”}，
{“值”：12，“日期”：“20151124”}，
{“值”：33，“日期”：“20151224”}，
{“值”：-10，“日期”：“20160124”}，
{“值”：-10，“日期”：“20160224”}，
{“值”：-2，“日期”：“20160324”}，
{“值”：17，“日期”：“20160424”}，
{“值”：-4，“日期”：“20160524”}，
{“值”：6，“日期”：“20160864”}，
{“值”：23，“日期”：“20160724”}，
{“值”：13，“日期”：“20160824”}，
{“值”：-19，“日期”：“20160924”}，
{“值”：-8，“日期”：“20161024”}，
{“值”：-2，“日期”：“20161124”}，
{“值”：12，“日期”：“20161224”}
]
var margin={顶部：30，右侧：10，底部：10，左侧：30}，
宽度=960-margin.left-margin.right，
高度=600-margin.top-margin.bottom；
var y0=Math.max（Math.abs（d3.min（数据，函数（d）{return+d.value；}）），Math.abs（d3.max（数据，函数（d）{return+d.value；}））；
var parseDate=d3.time.format（“%Y%m%d”）.parse；
data.forEach（函数（d）{
d、 日期=解析日期（d.date）；
});
变量y=d3.scale.linear（）
.domain（[-y0，y0]）
.范围（[高度，0]）
.nice（）；
var x=d3.scale.ordinal（）
.域（d3.范围（数据.长度））
.rangeRoundBands（[0，宽度]，.2）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距.顶部+边距.底部+100）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
bars=svg。选择全部（“.bar”）
.数据（数据）；
bar.enter（）.append（“rect”）
.attr（“类”，函数（d）{返回d.value<0？“条负”：“条正”；}）
.attr（“x”，函数（d，i）{返回x（i）；}）
.attr（“宽度”，x.rangeBand（））
.attr（“填充”，“#a9a9”}）；
bar.transition（）
.持续时间（1000）
.延迟（功能（d，i）{
返回i*40；
})
.attr（“y”，函数（d）{返回y（Math.max（0，d.value））；}）
.attr（“height”，函数（d）{return Math.abs（y（d.value）-y（0））；}）；
svg.append（“g”）
.attr（“类”、“x轴”）
.呼叫（yAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.附加（“行”）
.attr（“y1”，y（0））
.attr（“y2”，y（0））
.attr（“x1”，0）
.attr（“x2”，宽度）；
svg.append（“g”）
.attr（“类”、“xx轴”）
.attr（“transform”、“translate（0）”+parseInt（高度+30）.toString（）+”）
.呼叫（xAxis）
.selectAll（“文本”）
.style（“文本锚定”、“结束”）
.attr（“dx”，“-.8em”）
.attr（“dy”，“-.55em”）
.attr（“变换”、“旋转（-90）”）
酒吧
.exit（）.remove（）；

这是行不通的。我已经在谷歌上搜索了相当多的内容，但我仍然无法理解这里的问题

如果有人能解释代码的错误以及如何修复它，那就太好了。

使用d3.time.scale（）作为时间轴

var x =  d3.time.scale()  
       .domain(d3.extent(data, function(d){  
               return d.date;  
       }))  
       .range([0, width]);  

var xAxis = d3.svg.axis()  
          .scale(x)  
          .tickFormat(d3.time.format("%Y%m%d"))  
          .orient("bottom");  

---

谢谢，我现在可以看到轴了，但是，由于rangeBands（）不再定义，所以这些条不会显示。如果我将宽度设置为某个数值，它仍然不会显示，有什么原因吗？