Question

我正在尝试使用d3.js在X轴上创建一个不等间隔的散点图。我的CSV数据部分显示在此处：

chr,pos,val
22,8947,8.58891099252
22,8978,4.65541559632
22,8996,6.33685790218
22,8997,9.00384002282
22,9006,4.39533823989
MT,9471,5.0655064583
MT,9472,7.83798949399
MT,9473,0.587797595352
MT,9474,4.6475160648
MT,9475,2.52382097771
MT,9476,7.8431366396
MT,9477,1.71519736769
MT,9478,2.61168595179
MT,9479,4.15061022346
MT,9470,7.1477707428

每个pos值的chr值的数量可能不同。在某些情况下，它可能是20，其他100，依此类推。我需要在y轴上创建val与x轴上chr的图，每个chr的x间隔等于{{1}的数量那个pos的值。虽然x轴的顺序标度似乎适合，但它可能不支持不等间隔。对于线性刻度，可以使用多线性刻度显示不等间隔，但chr中字母字符的存在意味着不显示刻度。有谁知道我怎么能在d3.js中显示不等的间隔？

更新：

我在这里有一些代码用于域和使用线性刻度的刻度：

chr

我现在无法理解如何显示刻度。这样就显示了23和24而不是const x = d3.scale.linear() .domain(input.map((d) => { if (d.chr === 'MT') { return 23; } if (d.chr === 'X') { return 24; } return d.chr; })) .range(xTicks);和MT。

我不确定这一部分：

Answer 1

以下是使用tickFormat（而不是tickValues）条件格式化刻度线的示例。

假设数据为：

19, 20, 21, 22, 23, 24;

但我们将在“X”中更改23，在刻度中更改为24。点击“运行代码段”：

var data = [19, 20, 21, 22, 23, 24];

var width = 400, height = 100;

var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("heigth", height);
	
var xScale = d3.scale.linear()
	.domain(d3.extent(data))
	.range([0, width*.9]);
	
var xAxis = d3.svg.axis()
    .orient("bottom")
	.ticks(6)
	.tickFormat(function(d){
        if(d == 23){
	    return "X"
	} else if(d==24){
	    return "MT"
	} else {
	    return d
	}
    })
    .scale(xScale);
						
svg.append("g")
    .attr("class", "axis")  
    .attr("transform", "translate(20,20)")
    .call(xAxis);

.axis path,
.axis line {
  fill: none;
  stroke: #aaa;
  shape-rendering: crispEdges;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

我从19号染色体开始只是为了节省一些空间，但你可以得到一般的想法。

使用d3.js在x轴上创建具有不等间隔的散点图

1 个答案: