有一种方法来创建具有子域的域的缩放吗？ [英] Is there a way to create scales with domains that have a sub-domain?

问题描述

我试图创建一个曼哈顿情节，类似于下面的情况。

I'm trying to create a Manhattan plot, similar to the one seen below. What I have, so far, is followed.

这是我想要创建的：

This is what I'm trying to create:

这是我到目前为止编码lol）：

This is what I've coded up so far (lol):

有两个因素决定了 x 的位置。 （1）范围从 [1,22] 的染色体指数，和（2）范围从 [1,1,000,000] / code>。染色体指数越大，位置坐标越大。

There are two factors that determine the x position of the dots. (1)The chromosome index which ranges from [1, 22], and (2)the position coordinate which ranges from [1, 10,000,000]. The greater the chromosome index, the greater the position coordinate.

问题是：如何设置位置坐标的域，使得点保持在染色体索引

The question is: how do I set the domain for the position coordinates so that the dots stay within the chromosome index boundary like seen in the first picture.

以下是一些相关代码：

var x0 = d3.scale.linear().range([0, width]),
    x1 = d3.scale.linear().range([0, width]),
     y = d3.scale.linear().range([height, 0]),
 xAxis = d3.svg.axis().scale(x0).orient("bottom"),
 yAxis = d3.svg.axis().scale(y).orient("left").tickPadding(6),
 color = d3.scale.category20c();

var positions = [],
    pvalues = [];
this.data.forEach(function (d) {
    d.values.forEach(function (v) {
        positions.push(v.position);
        pvalues.push(v.pvalue);
    });
});

var xMax = d3.max(positions),
    ymax = d3.max(pvalues);

x0.domain([1, 22]);
x1.domain([0, xMax]);
y.domain([0, ymax]);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("class", "label")
    .attr("transform", "rotate(-90)")
    .attr("y", 8)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("p-value");

var chromosome = svg.selectAll(".chr")
    .data(this.data)
    .enter().append("g")
    .attr("class", "chr")
    .attr("x", function (d) {
        return x0(d.chr);
    })
    .attr("width", width / 22)
    .style("fill", function (d) {
        return color(d.chr);
    });

chromosome.selectAll("circle")
    .data(function (d) {
        return d.values;
    })
    .enter().append("circle")
    .attr("r", 3)
    .attr("cx", function (d) {
        return x1(d.position);
    })
    .attr("cy", function (d) {
        return y(d.pvalue);
    });

更新：所以我切换到使用 d3 .scale.ordinal（）为 x 缩放 grouping barchart example 。我认为我更接近，但现在，我如何防止点被绘制在相同的 x 位置？

Update: So I switched to using d3.scale.ordinal() for both x scales by following the grouped barchart example. I think I got closer but, now, how do I prevent the dots from being drawn in the same x position?

数据格式：：

Data format:

this.data ：

[
  {
    chr: 1,
    values: [
      {
        snp: rs182799,
        position: 1478180,
        pvalue: 3.26E-05
      },
      {
        snp: rs182349,
        position: 1598180,
        pvalue: 3.26E-05
      },
    ...
    ]
  },

  chr: 2,
    values: [
      {
        snp: rs199799,
        position: 2678180,
        pvalue: 3.26E-05
      },
      {
        snp: rs182349,
        position: 2998180,
        pvalue: 3.26E-05
      },
    ...
    ]
  },
  ...
]

推荐答案

移动到序数量表是正确的做法对于主域 [1，22] 。

Moving to ordinal scale was the right thing to do for the primary domain [1, 22].

对于每个主要横坐标的 [1,1e7] 的子网域，方法是为每个横坐标生成一个刻度。关于范围的几个问题应首先回答，虽然：

For the subdomain of [1, 1e7] for each primary abscissa, the way to do it would be to generate one scale for each abscissa. A few questions about the range should be answered first, though:

1. 位置均匀分布？


2. 在主图表中，子域的范围随着主横坐标增加而缩小 x = 22 的面积比 x = 2 小得多。对于每个染色体索引， position 的位置 [1，1e7] ？



1. Are the positions uniformly distributed?
2. In the primary chart, it looks as if the range of the subdomain is shrinking as the primary abscissa is increasing (e.g., the width of area for x = 22 is much smaller than for x = 2). Do position for each chromosome index have the same range [1, 1e7]?

假设位置均匀分布在 [1,1e7] ，并且 position 的最大值为 1e7 ，表示所有染色体索引case），方法是 nudge 子域中每个圆的 x 轴值：

Assuming that the position is distributed uniformly in [1, 1e7] and the maximum value of position is 1e7 for all chromosome indexes (which does not seem to be the case), the way to do it would be to nudge the x axis value of each circle within the subdomain:

chromosome.selectAll("circle")
    // ...
    .attr("cx", function (d, i) {
        /* Assuming that data provided is in the "correct" order
         * and `x1` is the ordinal scale. 
         */
        return x1(i) - x1.rangeBand() / 2 + d.position / 1e7;
    })
    // ...

这里子域的 scale 是隐式的，而不是 d3.scale 。

Here the scale of the subdomain is an implicit one, not a d3.scale.

这篇关于有一种方法来创建具有子域的域的缩放吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！