D3. js zoom: дискретные масштабы тепловой карты не обновляются - PullRequest
Новая
       23

D3. js zoom: дискретные масштабы тепловой карты не обновляются

1 голос
/ 05 мая 2020

Я новичок в D3 и надеюсь, что вы можете мне помочь. У меня есть базовая c тепловая карта для визуализации данных экспрессии генов с условиями / обработками на xAxis и генами на yAxis, поэтому 2 дискретных шкалы (scaleBands). Теперь я хочу добавить функцию d3.zoom(), как показано ниже: 

  const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];

  svg.call(d3.zoom()
      .scaleExtent([1, 8])
      .translateExtent(extent)
      .extent(extent)
      .on("zoom", updateChart));
  function updateChart() {
    ////PROBLEM ZOOM WITH SCALEBAND
    // new x Scale
    x.range([margin.left, width - margin.right].map(d => d3.event.transform.applyX(d)));
    svg.selectAll("#cell").attr("x", d => x(d.condition)).attr("width", x.bandwidth());
    svg.selectAll("xAxisG").call(d3.axisBottom(x));
    // new y Scale
    y.range([height - margin.bottom, margin.top].map(d => d3.event.transform.applyY(d)))
    svg.selectAll("#cell").attr("y", d => y(d.gene)).attr("height", y.bandwidth());
    svg.selectAll("yAxisG").call(d3.axisLeft(y));
  }

(см. Код https://github.com/NicolaiNi/Omiqa.bioProjects) Итак, масштабирование в целом работает, но обновление осей x и y не. Как я могу обновить ось в зависимости от уровня масштабирования?

См. Рисунок ниже: после масштабирования оси x и y исчезают и не обновляются

...