Javascript 如何使用d3.js v4在图表上隐藏时间间隔？

我对使用d3.js的图表有问题。我想从图表中隐藏一个特定的时间间隔，时间间隔是静态的，例如：从16:00到18:00。我是否需要创建一个不使用此间隔的自定义比例，或者d3.js可以提供一个简单的解决方案

有了这个密码我就明白了

---

正如您所看到的，00:00和12:00之间存在不应该存在的空间。我想从图表中清除这个空格，所以00:00和12:00之间的宽度就像12:00和18:00之间的宽度一样。在这种情况下，您要做的是操作DOM。但是对于D3数据驱动的文档，您需要考虑数据。对于要隐藏的时段，可以生成或过滤数据以删除它们，然后图形会自动反映更改

编辑：

---

在您的评论之后，您可以使用以下答案来完成此操作：

尝试将您的数据结构转换为更可用的格式。然后使用序数或带刻度

常数宽度=600； 常数高度=200； 常数数据=[{ 瓦尔：10， 日期：星期一12:00 }, { 瓦尔：1， 日期：星期一18:00 }, { 瓦尔：7， 日期：星期二12:00 }, { 瓦尔：3， 日期：星期二18:00 }, { 瓦尔：9， 日期：星期三12:00 }, { 瓦尔：5， 日期：星期三18:00 } ] 常量xDomain=data.mapx=>x.date const vis=d3.selectbody.appendsvg .宽度，宽度 .身高,身高,； 常数=相对附加值 常数x=d3.scale.ordinal .域域域 .范围带[0，宽度]； const xAxis=d3.svg.axis scalex先生 .东方巴顿酒店 附文 .attr'transform'，'translate0，${height-30}` .attrclass，x轴 .callxAxis； 常量barGroup=vis.append'g' barGroup.selectAll'rect' .数据 进来 .append'rect' .attr'x'，d=>xd.date .attr'y'，d=>高度-d.val*15-30 .attr'width'，width/data.length .attr'height'，d=>d.val*15 .轴文本{ 字体：10px无衬线； } .轴线路径， .轴线{ 填充：无； 行程：1c647e； 形状渲染：边缘清晰； } 直肠{ 填充：55accf }

---

你能过滤你的数据集吗？你有代码给我们看吗？@ksav我不需要过滤数据，因为数据不包含这个时间间隔。也许可以从你的数据集中过滤掉任何零值数据点，然后创建一个有序的刻度。如果您在问题中添加了一些代码，有人会帮助您。@ksav添加了示例代码，显示了我想要获取的内容在该时间间隔内没有数据，这就是为什么我要隐藏它们的原因请参见上面的修改后的答案。

var width = 960,
    height = 500;

var fmtMonth = d3.time.format("%b");
var date1 = new Date(2018, 9, 26);
var date2 = new Date(2018, 9, 27);
var date3 = new Date(2018, 9, 28);
var date4 = new Date(2018, 9, 29);

var dates = [date1, date2, date3, date4];


var vis = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height);

var linear = vis.append("g").attr("transform", "translate(20, 10)"),
    polyLinear = vis.append("g").attr("transform", "translate(20, 100)");


// poly linear scale
var tickWidth = (940) / (dates.length - 1);

var range = dates.map(function (d, i) { return (i * tickWidth); });

var polylinearTimeScale = d3.time.scale()
  .domain(dates)
  .range(range);

var polylinearAxis = d3.svg.axis().scale(polylinearTimeScale);

var ticks = polylinearTimeScale.ticks();

// Filter by removing 6 hours
var displayTicks = ticks.filter(date => date.getHours() !== 6);



polylinearAxis.tickValues(displayTicks);
polylinearAxis.tickFormat(d3.time.format("%H:%M"))


polyLinear.append("g").attr("class", "x axis").call(polylinearAxis);