时间戳

首页 > 解决方案 > D3.js 缩放：热图的离散比例不更新

javascript - D3.js 缩放：热图的离散比例不更新

问题描述

我对 D3 很陌生，希望你能帮助我。我有一个基本的热图，可以用 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轴消失且不更新

标签： javascriptzoomingd3.js

解决方案

推荐阅读