Создайте диаграмму рассеяния с неравными интервалами по оси x с помощью d3.js

Я пытаюсь создать график рассеяния с неравными интервалами по оси X, используя d3.js. Мои данные CSV здесь показано частично:Создайте диаграмму рассеяния с неравными интервалами по оси x с помощью d3.js

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 и так далее. Мне нужно создать график val по оси y vs chr по оси x, при этом x-интервал для каждого chr равен числу значений pos для этого значения chr. Хотя порядковая шкала для оси х представляется здесь подходящей, она, вероятно, не поддерживает неравные интервалы. При линейном масштабе неравные интервалы могут быть показаны с использованием полилинейных масштабов, но наличие буквенных символов в chr означает, что никаких тиков не отображается. Кто-нибудь знает, как я могу показать неравные интервалы в d3.js?

UPDATE:

У меня есть некоторый код здесь для домена и клещи, используя линейную шкалу:

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

Я не могу понять, как показать тики now.With это он показывает 23 и 24 вместо MT и X.

Я не уверен, что в этой части:

const xAxis = d3.svg.axis().scale(x).orient('bottom').tickValues(input.map((d) => { 
    if (d.chr === 'MT') { 
     // returning a string here shows NaN 
     return 23; 
    } 
    if (d.chr === 'X') { 
     return 24; 
    } 
    return d.chr; 
    }));

источник

2016-07-27 Auric Goldfinger

Вы используете какую-либо половую хромосому здесь? Если нет, просто назначьте номер 23 для митохондрий и создайте «if» в тиках для отображения MT, если хромосоме будет 23. Таким образом, вы можете использовать линейный масштаб без проблем. –

В моем текущем наборе данных у меня есть MT и X как две нечисловые хромосомы. –

Итак, присвойте им номера (23 и 24) и создайте условие для отображения тиков в виде текстов. –

Вот пример того, как условного форматирования тиков с помощью tickFormat (не tickValues).

Пусть данные:

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

Но мы собираемся изменить 23 для «X» и 24 для «МТ» в клещах. Нажмите кнопку «запустить фрагмент кода»:

var data = [19, 20, 21, 22, 23, 24]; 
 

 
var width = 400, height = 100; 
 

 
var svg = d3.select("body") 
 
\t .append("svg") 
 
\t .attr("width", width) 
 
\t .attr("heigth", height); 
 
\t 
 
var xScale = d3.scale.linear() 
 
\t .domain(d3.extent(data)) 
 
\t .range([0, width*.9]); 
 
\t 
 
var xAxis = d3.svg.axis() 
 
    .orient("bottom") 
 
\t .ticks(6) 
 
\t .tickFormat(function(d){ 
 
     if(d == 23){ 
 
\t  return "X" 
 
\t } else if(d==24){ 
 
\t  return "MT" 
 
\t } else { 
 
\t  return d 
 
\t } 
 
    }) 
 
    .scale(xScale); 
 
\t \t \t \t \t \t 
 
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 раз, чтобы сэкономить место, но вы можете получить общее представление.

источник

2016-07-28 05:35:47

Спасибо! Это сработало :) .. Я читал на tickFormat позже и пробовал, но не использовал его должным образом, и так получилось неправильный масштаб. –

Создайте диаграмму рассеяния с неравными интервалами по оси x с помощью d3.js

ответ

Смежные вопросы