Javascript d3带画笔的条形图

我有一个d3条形图，它使用JSON文件中的数据显示了一系列条形图。默认情况下，所有数据都显示在图表上，用户可以使用d3的画笔功能放大图表的特定部分

我在这里设置了一个plunkr：

但是，我有几个问题：

1.）xAxis是一堆模糊不清的标签，而不是平均显示几个月

xAxis的设置如下所示：

var xScale = d3.scale.ordinal().rangeRoundBands([0, mainWidth], 0);
var xAxis = d3.svg.axis().scale(xScale).orient('bottom')
          .innerTickSize(-mainHeight)
          .outerTickSize(0)
          .tickPadding(10);
xScale.domain(data.map(function (d) {
      return d.date;
  }));

这有什么问题吗

2.）拖动画笔时，会导致xAxis仅显示两个标签，这两个标签会更改为画笔的正确开始日期和结束日期，但不会像正常情况那样显示两者之间的日期

---

3.）这些条不会缩放到您刷过的内容，您仍然可以在defaultRange函数中看到默认条。

老实说，您的问题没有得到回答（即使有赏金）的原因是您的代码无法阅读且难以处理。我最初打算“修复”它，但很快就迷失在如此多的宽度、高度和边距中，我就是无法跟上。那么，我们在这里能做什么

首先，使用d3.js版本4。版本3没有问题，但对于新开发，最好不要从不推荐的、不受支持的软件开始

第二，寻找一个你正试图做的事情的典型例子。博斯托克先生的任何作品都是你应该遵循的起点。剪切/粘贴并开始修改。如果是你的话，我会从你开始

从那条基线开始，我可以在大约10分钟内将你的数据转换成条形图。这是

---

完整代码：

.区域{
填充：钢蓝；
}
.酒吧{
填充：钢蓝；
剪辑路径：url（#剪辑）；
}
.zoom{
光标：移动；
填充：无；
指针事件：全部；
}
var svg=d3。选择（“svg”），
边距={顶部：20，右侧：20，底部：110，左侧：40}，
margin2={顶部：430，右侧：20，底部：30，左侧：40}，
宽度=+svg.attr（“宽度”）-margin.left-margin.right，
高度=+svg.attr（“高度”）-margin.top-margin.bottom，
height2=+svg.attr（“height”）-margin2.top-margin2.bottom；
var parseDate=d3.timeParse（“%Y-%m”）；
var x=d3.scaleTime（）.range（[0，宽度]），
x2=d3.scaleTime（）.range（[0，宽度]），
y=d3.scaleLinear（）.range（[height，0]），
y2=d3.scaleLinear（）.range（[height2，0]）；
var xAxis=d3.axisBottom（x），
xAxis2=d3.轴底（x2），
yAxis=d3。轴左（y）；
var brush=d3.brushX（）
.范围（[[0,0]，[width，height2]]）
.在（“刷端”，刷过的）；
var area=d3.area（）
.curve（d3.curveMonotoneX）
.x（函数（d）{返回x（d.Date）；}）
.y0（高度）
.y1（函数（d）{返回y（d.Total）；}）；
var area 2=d3.面积（）
.curve（d3.curveMonotoneX）
.x（函数（d）{返回x2（d.Date）；}）
.y0（高度2）
.y1（函数（d）{返回y2（d.Total）；}）；
svg.append（“defs”）.append（“clipPath”）
.attr（“id”、“剪辑”）
.append（“rect”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var focus=svg.append（“g”）
.attr（“类”、“焦点”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var context=svg.append（“g”）
.attr（“类”、“上下文”）
.attr（“transform”、“translate”（+margin2.left+）、“+margin2.top+”）；
d3.json（“https://jsonblob.com/api/58063c0fe4b0bcac9f814ee6，函数（错误，数据）{
如果（错误）抛出错误；
data.forEach（函数（d）{
d、 日期=解析日期（d.Date）；
});
x、 域（d3.extent（数据，函数（d）{返回d.Date；}））；
y、 域（[0，d3.max（数据，函数（d）{返回d.Total；}）]；
x2.域（x.域（））；
y2.域（y.域（））；
焦点。选择全部（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
.attr（“类”、“条”）
.attr（“x”，函数（d）{返回x（d.Date）；}）
.attr（“y”，函数（d）{返回y（d.Total）；}）
.attr（“宽度”，宽度/数据长度-2）
.attr（“高度”，函数（d）{返回高度-y（d.Total）；}）；
focus.append（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
focus.append（“g”）
.attr（“类”、“轴--y”）
.呼叫（yAxis）；
context.append（“路径”）
.基准（数据）
.attr（“类别”、“区域”）
.attr（“d”，区域2）；
上下文。附加（“g”）
.attr（“类”、“轴--x”）
.attr（“变换”、“平移（0）”、“高度2+”）
.呼叫（xAxis2）；
上下文。附加（“g”）
.attr（“类”、“刷”）
.呼叫（刷子）
.call（brush.move，x.range（））；
});
函数brushed（）{
var s=d3.event.selection | | x2.range（）；
x、 域（s.map（x2.invert，x2））；
焦点。选择（“.area”）.attr（“d”，区域）；
焦点。选择（“.axis--x”）。调用（xAxis）；
焦点。选择全部（“.bar”）
.attr（“x”，函数（d）{返回x（d.Date）；}）；
}

Hi Mark，是否可以用堆叠条形图显示一个示例？此外，我的xaxis不是日期类型，而是字符串。