Javascript 无法使用d3创建曼哈顿绘图

我必须使用下面给出的数据集（一部分），用d3.js绘制曼哈顿图：

x轴有一个带有子域的域。域是染色体，子域是每个染色体的位置。y轴显示p值。我将用下面的图表解释我的问题：

我的观点无法区分立场。我需要它们分布在分配给每个职位的子域中。我的代码：

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 1260 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

const x0 = d3.scale.ordinal()
             .rangeRoundBands([0, width], .1);

const x1 = d3.scale.ordinal();
const y = d3.scale.linear()
            .range([height, 0]);

const color = d3.scale.category20c();

const xAxis = d3.svg.axis().scale(x0).orient('bottom');

const yAxis = d3.svg.axis().scale(y).orient('left').tickFormat(d3.format('.2s'));

let svg = d3.select('body').append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

d3.csv('test.csv', (error, data) => {

  if (error) {
    throw error;
  }

  const x0Max = d3.max(data, (d) => {
    return d.chromosome;
  });

  const x1Max = d3.max(data, (d) => {
    return parseInt(d.position);
  });

  const yMax = d3.max(data, (d) => {
    return parseFloat(d.p_value);
  });

  x0.domain(data.map((d) => { return d.chromosome }));
  console.log(x0.rangeBand());
  const x1 = d3.scale.ordinal()
              .domain(data.map((d) => { return d.position }))
              .rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, yMax]);

  svg.append('g')
    .attr('transform', 'translate(0, ' + height + ')')
    .call(xAxis)

  svg.append('g')
    .call(yAxis)
    .append('text')
    .attr('transform', 'rotate(-90)')
    .attr('y', 6)
    .attr('dy', '.71em')
    .style('text-anchor', 'end')
    .text('p-value');

  // formatData returns data in the format shown above in this post
  const input = formatData(data);

  const chromosome = svg.selectAll('.chr')
    .data(input)
    .enter().append('g')
    .attr('class', 'chr')
    .attr('x', (d) => {
      return x0(d.chromosome);
    })
    .attr('transform', (d) => {
      return 'translate(' + x0(d.chromosome) + ',0)';
    })
    .style('fill', (d) => {
      return color(d.chromosome);
    });

  chromosome.selectAll('circle')
    .data((d) => {
      return d.values;
    })
    .enter().append('circle')
    .attr('r', 3)
    .attr('cx', (d, i) => {
      return x1(d.position);
    })
    .attr('cy', (d) => {
      return y(d.p_value);
    });
});

有一篇文章几乎是这样写的。这真的很有帮助，但我无法让它与公认的答案一起工作。除此之外，我将此作为参考

---

我想让x1成为我的子域，让x0成为我的主域，如分组条形图帖子所示。我的问题是无法将子域与域正确关联。此外，这是我第一次尝试使用d3.js，我还没有完全理解我编写的代码，因为我在很大程度上依赖于示例。请帮助。

我已经为板球数据创建了曼哈顿图表。这将帮助您在d3中创建曼哈顿绘图。它基于D3V4

请参考此链接

您也可以在这里看到输出

---

如果可以的话，试着制作一个木偶或小提琴，别人会更容易帮助你。你有什么解决办法吗？

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 1260 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

const x0 = d3.scale.ordinal()
             .rangeRoundBands([0, width], .1);

const x1 = d3.scale.ordinal();
const y = d3.scale.linear()
            .range([height, 0]);

const color = d3.scale.category20c();

const xAxis = d3.svg.axis().scale(x0).orient('bottom');

const yAxis = d3.svg.axis().scale(y).orient('left').tickFormat(d3.format('.2s'));

let svg = d3.select('body').append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .append('g')
            .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

d3.csv('test.csv', (error, data) => {

  if (error) {
    throw error;
  }

  const x0Max = d3.max(data, (d) => {
    return d.chromosome;
  });

  const x1Max = d3.max(data, (d) => {
    return parseInt(d.position);
  });

  const yMax = d3.max(data, (d) => {
    return parseFloat(d.p_value);
  });

  x0.domain(data.map((d) => { return d.chromosome }));
  console.log(x0.rangeBand());
  const x1 = d3.scale.ordinal()
              .domain(data.map((d) => { return d.position }))
              .rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, yMax]);

  svg.append('g')
    .attr('transform', 'translate(0, ' + height + ')')
    .call(xAxis)

  svg.append('g')
    .call(yAxis)
    .append('text')
    .attr('transform', 'rotate(-90)')
    .attr('y', 6)
    .attr('dy', '.71em')
    .style('text-anchor', 'end')
    .text('p-value');

  // formatData returns data in the format shown above in this post
  const input = formatData(data);

  const chromosome = svg.selectAll('.chr')
    .data(input)
    .enter().append('g')
    .attr('class', 'chr')
    .attr('x', (d) => {
      return x0(d.chromosome);
    })
    .attr('transform', (d) => {
      return 'translate(' + x0(d.chromosome) + ',0)';
    })
    .style('fill', (d) => {
      return color(d.chromosome);
    });

  chromosome.selectAll('circle')
    .data((d) => {
      return d.values;
    })
    .enter().append('circle')
    .attr('r', 3)
    .attr('cx', (d, i) => {
      return x1(d.position);
    })
    .attr('cy', (d) => {
      return y(d.p_value);
    });
});