Как скрыть временной интервал на графике, используя d3.js v4?

Question

У меня проблема с графиком, использующим d3.js.Я хочу скрыть определенный интервал времени от графика, интервал является статическим (пример: с 16:00 до 18:00).Нужно ли создавать собственный масштаб, где этот интервал не используется, или d3.js может предоставить простое решение?

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);

Сэтот код я получаю

Как видите, между 00:00 и 12:00 есть место, которое не должно быть.Я хочу очистить это пространство от графика, чтобы ширина между 00:00 и 12:00 была такой же, как ширина между 12:00 и 18:00

Answer 1

Попробуйте преобразовать свою структуру данных в более удобный формат.Затем используйте порядковый или ленточный масштаб.

const width = 600;
const height = 200;


const data = [{
    val: 10,
    date: "Mon 12:00"
  },
  {
    val: 1,
    date: "Mon 18:00"
  },
  {
    val: 7,
    date: "Tue 12:00"
  },
  {
    val: 3,
    date: "Tue 18:00"
  },
  {
    val: 9,
    date: "Wed 12:00"
  },
  {
    val: 5,
    date: "Wed 18:00"
  }
]

const xDomain = data.map((x) => x.date)


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

const ordinalAxis = vis.append("g")

const x = d3.scale.ordinal()
  .domain(xDomain)
  .rangeBands([0, width]);

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

vis.append("g")
  .attr('transform', `translate(0, ${height-30})`)
  .attr("class", "x axis")
  .call(xAxis);

const barGroup = vis.append('g')

barGroup.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', d => x(d.date))
  .attr('y', d => height - d.val * 15 - 30)
  .attr('width', width / data.length)
  .attr('height', d => d.val * 15)

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #1c647e;
  shape-rendering: crispEdges;
}

rect {
  fill: #55accf
}

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

Answer 2

В этом случае вы намереваетесь манипулировать DOM.Но для D3 ( управляемых данными документов ) вам нужно подумать о данных.Для периодов, которые вы хотите скрыть, вы можете сгенерировать или отфильтровать данные, чтобы удалить их, и тогда ваш график автоматически отразит изменение.

Редактировать: После вашего комментария вы можете сделать это, используя ответ от @ ckersch : показывать только определенные часы с d3.js