D3.js - Как умножить временную область на скаляр? - PullRequest
Новая
       33

D3.js - Как умножить временную область на скаляр?

0 голосов
/ 31 августа 2018

У меня обычная шкала времени: 

band.xScale = d3.time.scale()
  .domain([data.minDate, data.maxDate])

Что я хочу изменить с увеличением: 

var zoom = d3.behavior.zoom()
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

function zoomed() {
    console.log(d3.event.scale);

    var oldDomain = bands[0].xScale.domain();
    var newDomain = ??? oldDomain * d3.event.scale ???
    bands[0].xScale.domain(newDomain);
    bands[0].redraw();
}

Другими словами, преобразуйте домен [date1, date2] в новый массив с новыми датами.

Я мог бы сам рассчитать преобразование, но мне пришлось бы использовать что-то вроде Moment.js, и действительно кажется, что у d3 был бы встроенный подход для ...

1 Ответ

0 голосов
/ 31 августа 2018
  • d3v4 / d3v5

d3-zoom предоставляет функцию rescaleX , которая обновляет масштаб на основе события масштабирования (и который может применяться к шкале времени): 

var updatedScale = d3.event.transform.rescaleX(scale);

, который можно применить для события масштабирования по оси времени, например: 

var scale = d3.scaleTime()
  .domain([new Date(2018, 7, 20), new Date(2018, 7, 30)])
  .range([0, 400]);

var axis = d3.axisBottom(scale);

var svg = d3.select("svg").append("g")
  .attr("transform", "translate(50,30)")
  .call(axis)
  .call(d3.zoom().on("zoom", zoomed));

function zoomed() {
  var updatedScale = d3.event.transform.rescaleX(scale);
  svg.call(axis.scale(updatedScale));
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="500" height="100"></svg>
  • d3v3

Шкала связана с масштабированием и обновляется масштабом: 

d3.behavior.zoom().x(scale).on("zoom", zoomed)

, что дает, например: 

var scale = d3.time.scale()
  .domain([new Date(2018, 7, 20), new Date(2018, 7, 30)])
  .range([0, 400]);

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

var svg = d3.select("svg").append("g")
  .attr("transform", "translate(50,30)")
  .call(axis)
  .call(d3.behavior.zoom().x(scale).on("zoom", zoomed));

function zoomed() {
  axis.scale(scale);
  svg.call(axis.scale(scale));
}
<script src="https://d3js.org/d3.v3.min.js"></script>
<svg width="500" height="100"></svg>
...