D3. js как два масштабируемых бэнда с доменами с одинаковым размером и одинаковым диапазоном могут давать разные координаты? - PullRequest
Новая
       128

D3. js как два масштабируемых бэнда с доменами с одинаковым размером и одинаковым диапазоном могут давать разные координаты?

0 голосов
/ 04 марта 2020

Я пытаюсь создать диаграмму рассеяния с библиотекой D3. Мой график рассеяния касается предметов, которые были проданы во время продажи и имеют значения high_estimate и low_estimate. Ось X - это порядковый масштаб (по продажам), а ось Y - это линейный масштаб, показывающий цену. Сложность заключается в том, что в рамках каждой продажи (ось x) я должен создать другую шкалу для построения графика каждого элемента, которая представлена ​​парой из 2 точек (низкая и высокая оценка). Действительно, я хочу, чтобы обе точки для элемента находились в одной и той же координате х. Вот соответствующий код: 

  //creating x and y scale
  let x = d3.scaleBand()
        .range([0, innerWidth])
        .domain(saleDates)
        .paddingInner(0.1);

  var y = d3.scaleLinear()
      .range([innerHeight, 0])
      .domain([0, max]);

   // creating groups for every sale
  var sales = svg.selectAll(".per_sale")
        .data(saleDates)
        .enter().append("g")
        .attr("id", saleDate => (`sale-${saleDate}`))
        .attr("transform", saleDate => `translate(${x(saleDate)},0)`);

const band = x.bandwidth()
 // for each sale picking up all low and high estimates and creating specific scales to plot
 // all points.
sales._groups[0].forEach(sale => {
  let lowEstimates = data[sale.__data__].map(el => el.low_estimate)
  let highEstimates = data[sale.__data__].map(el => el.high_estimate)
  let x_low = d3.scaleBand()
            .domain(lowEstimates).range([0, band])
            .padding(0.05);

  let x_high = d3.scaleBand()
                .domain(highEstimates).range([0, band])
                .padding(0.05);

  d3.select(sale).selectAll(".point.low-estimate")
      .data(lowEstimates)
      .enter()
      .append("circle")
      .attr("class", "point low-estimate")
      .attr("cx", d => x_low(d))
      .attr("cy", d => y(d))
      .attr("r", 1.5)
      .style("fill", "blue")

  d3.select(sale).selectAll(".point.high-estimate")
      .data(highEstimates)
      .enter()
      .append("circle")
      .attr("class", "point high-estimate")
      .attr("cx", d => x_high(d))
      .attr("cy", d => y(d))
      .attr("r", 1.5)
      .style("fill", "red")

})

Проблема в том, что координата x, создаваемая x_low и x_high для соответствующих элементов lowEstimates и highEstimates, различна. Я не понимаю, как это возможно, поскольку оба массива имеют одинаковое количество элементов, а x_low и x_high являются scaleBand с одинаковым диапазоном и заполнением ...

Вот ручка с данными, чтобы увидеть проблему: https://codepen.io/davidgeismar/pen/abOLbgE

...