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的SO帖子。这真的很有帮助，但我无法使用已接受的答案。除此之外，我使用此post作为参考。

我想让x1成为我的子域名，x0是我的主域名，如分组条形图帖子所示。我的问题是我无法正确地将子域与域关联。另外，这是我对d3.js的第一次尝试，而且我还没有理解我编写的代码中的所有内容，因为我在很大程度上依赖于这个例子。请帮忙。

Answer 1

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

请参阅此链接

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

你也可以在这里看到输出

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

无法用d3创建曼哈顿情节

1 个答案: