Эквивалент d3 scale.bandwidth () для тиков линейной шкалы? - PullRequest
Новая
       41

Эквивалент d3 scale.bandwidth () для тиков линейной шкалы?

0 голосов
/ 03 января 2019

В D3 вы можете вернуть ширину между двумя полосами с помощью band.bandwidth().

Существует ли эквивалент этого для d3.scaleLinear () для данного домена, если вы установили галочки на оси?

Таким образом, если ваш домен tickValues ​​равен [-2,-1,0,1,2], scaleLinear.tickWidth() предоставит вам разницу между scaleLinear(0) и scaleLinear(1) (или scaleLinear(-2) и scaleLinear(-1)) или любым другим значением, установленным между галочки быть.

1 Ответ

0 голосов
/ 04 января 2019

Как вы знаете, такого метода не существует.Кроме того, само понятие пропускной способности (которая не несет никакой информации) для линейного масштаба имеет мало смысла.

Но интересный вопрос о вашем вопросе заключается в том, что речь идет не о линейной шкале как таковой, а о оси , сгенерированной с использованием этой шкалы (как вы сказали "...при условии, что вы установили отметки на оси ").

В D3 ось, генерируемая при использовании шкалы, довольно непредсказуема (то есть количество отметок и их значения), особенно когдаиспользуя шкалу времени.Кроме того, вы можете изменить тики, используя axis.ticks() или axis.tickArguments().Из-за этого использование scale.ticks() для получения значений тиков не является точным методом.

При этом вы можете использовать функцию, которой вы передаете саму группу осей (SVG <g>).элемент), как этот, который я только что написал: 

function tickWidth(selection) {
    const ticks = selection.selectAll(".tick text")
        .nodes()
        .map(function(d) {
            return +d.textContent;
        });
    return scale(ticks[1]) - scale(ticks[0]);
}

В основном он получает все элементы <text> внутри групп .ticks, преобразовывает их в числа (они являются строками) и возвращает разницув масштабе.

Вот демоверсия: 

const svg = d3.select("svg");
const scale = d3.scaleLinear()
  .range([50, 450])
  .domain([0, 100]);
const axis = d3.axisBottom(scale);
const axisGroup = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);

const bandwidth = tickWidth(axisGroup);

console.log("the bandwidth is: " + bandwidth + " pixels")

function tickWidth(selection) {
  const ticks = selection.selectAll(".tick text").nodes().map(function(d) {
    return +d.textContent;
  });
  return scale(ticks[1]) - scale(ticks[0]);
}
<svg width="500" height="100"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>

Как видите, этот подход учитывает такие методы, как axis.ticks(), которые изменяют тики: 

const svg = d3.select("svg");
const scale = d3.scaleLinear()
  .range([50, 450])
  .domain([0, 100]);
const axis = d3.axisBottom(scale)
  .ticks(5);
const axisGroup = svg.append("g")
  .attr("transform", "translate(0,50)")
  .call(axis);

const bandwidth = tickWidth(axisGroup);

console.log("the bandwidth is: " + bandwidth + " pixels")

function tickWidth(selection) {
  const ticks = selection.selectAll(".tick text").nodes().map(function(d) {
    return +d.textContent;
  });
  return scale(ticks[1]) - scale(ticks[0]);
}
<svg width="500" height="100"></svg>
<script src="https://d3js.org/d3.v5.min.js"></script>
...