D3.js: установить положение оси на основе данных

Я пытаюсь нарисовать несколько графиков на одном изображении svg на основе хромосомных данных. Цель состоит в том, чтобы нарисовать по одному графику на каждую хромосому. Я хочу транспонировать ось (и данные) на основе номера хромосомы в данных.

Записи данных выглядят так (в формате JSON):

[{
    "chrom": 1,
    "pos": 2000000,
    "ratio": 0.0253,
    "average": 0.0408,
    "stdev": 0.0257,
    "z-score": - 0.6021
}, {
    "chrom": 1,
    "pos": 2250000,
    "ratio": 0.0304,
    "average": 0.0452,
    "stdev": 0.0245,
    "z-score": - 0.6021
}, {
    "chrom": 1,
    "pos": 2500000,
    "ratio": 0.0357,
    "average": 0.0498,
    "stdev": 0.024,
    "z-score": - 0.5885
}, {
    "chrom": 1,
    "pos": 2750000,
    "ratio": 0.0381,
    "average": 0.0522,
    "stdev": 0.0228,
    "z-score": - 0.6146
},
{etc..}

В настоящее время мой код выглядит так:


    d3.json("data.json", function(error, data) {
      if (error) throw error;

      x.domain(d3.extent(data, function(d) { return d.pos; }));
      y.domain(d3.extent(data, function(d) { return d['ratio']; }));


      svg.append("g")
      .attr("class", "x axis")
      .data(data)
      //.attr("transform", "translate(0," + graph_height + ")")
      .attr('transform', function(d) {
        if (d.chrom > Math.ceil(chrnumber / 2)) {
          console.log('translate('+ graph_width + graph_margin.center + ',' + graph_height + d.chrom * (graph_height + graph_margin.top) + ')');
          return 'translate('+ graph_width + graph_margin.center + ',' + graph_height + d.chrom * (graph_height + graph_margin.top) + ')';
        }else {
          console.log('translate(0,' + graph_height + d.chrom * (graph_height + graph_margin.top) + ')');
          return 'translate(0,' + graph_height + d.chrom * (graph_height + graph_margin.top) + ')';
        }
      })
      .call(xAxis);
    });

Но это не дает ни ошибок, ни вывода. Я полагаю, что в приведенном выше коде есть какая-то ошибка, потому что изображение svg не создается на странице.

Есть ли у кого-нибудь идеи, где я ошибся?


javascript svg json d3.js
person Matthias De Smet    schedule 03.03.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Строки здесь:

svg.append("g")
  .attr("class", "x axis")
  .data(data)

недостаточно для создания одной оси на хромосому. Один из способов сделать это (может быть, не самый простой, но очень «дружественный к d3») - создать массив, представляющий ваш набор хромосом.

var chromList = d3.set(                  //data structure removing duplicates
                  data.map(function(d) { // create a list from data by ...
                    return d.chrom       // ...keeping only the chrom field
                  }).values();           // export the set as an array
   //chromList=[1,2,3 ..], according to the values of chrom seen in your data.

Теперь вы привязываете этот список к своей оси, чтобы создать по одной оси для каждого элемента:

svg.append("g")       //holder of all x axis
  .selectAll(".axis") //creates an empty selection at first, but it will be filled next.
  .data(chromList)    //bind the list of chrom ids to the selection
  .enter()            //the selection was empty, so each chromosome is "entering"
  .append("g")        //for each chromosome, insert a g element: this is the corresponding axis
  .attr("class", "x axis")
  .attr('transform', function(d) {
         //use d here as your chromosome identifier
     });
person tarulen    schedule 03.03.2016
comment
Проголосуйте за красивое объяснение. Однако решение не сработало для меня. Я отредактировал свой код, но вывода по-прежнему нет: / - person Matthias De Smet; 03.03.2016
comment
Хорошо, поправка. Решение действительно работает гладко! Проблема, с которой я сейчас сталкиваюсь, заключается в том, что D3 пытается нарисовать новую ось для каждой записи в json, что приводит к более чем 1000 осям x в той же позиции. У вас есть исправление для этого? есть ли у D3 функция проверки, существует ли уже элемент? Спасибо за помощь!! - person Matthias De Smet; 03.03.2016
comment
Верно, моя ошибка, я думал, что данные на самом деле были списком хромосом, что явно неверно. Я собираюсь отредактировать это. - person tarulen; 03.03.2016