javascript - 无法使用 d3 创建曼哈顿图

Question

我必须使用下面给出的数据集(部分)使用 d3.js 制作曼哈顿图:

[
    {
      'chromosome': 1,
      'values': [
        {
          'position': 78178310,
          'p_value': 7.17731162216
        },
        {
          'position': 78178493,
          'p_value': 3.03890339149
        },
        ..
      ]
    },
    {
      'chromosome': 2,
      'values': [
        {
          'position': 257683,
          'p_value': 6.08904891824
        },
        {
          'position': 257742,
          'p_value': 3.50110329843
        },
        ..
      ]
    },
  ]

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);
    });
});

有一个帖子几乎是 same problem 。这确实很有帮助，但我无法让它与已接受的答案一起工作。除此之外，我正在使用这个post作为引用。

我想将 x1 设置为我的子域，将 x0 设置为我的主域，如分组条形图帖子中所示。我的问题是我无法将子域与域正确关联。另外，这是我第一次尝试 d3.js，我还没有理解我编写的代码中的所有内容，因为我非常依赖该示例。请帮忙。

Answer 1

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

请引用此链接

https://gist.github.com/ChandrakantThakkarDigiCorp/0620e41591f278431b8b98bfdf361b40

您还可以在此处查看输出

http://bl.ocks.org/ChandrakantThakkarDigiCorp/0620e41591f278431b8b98bfdf361b40