Butuh bantuan untuk memplot area di antara garis multivariat - bukan dari sumbu ke garis

Saya baru mengenal d3.js, dan saya kesulitan mengisi area antar garis dalam grafik persentil multivariat.

  • Saya tidak ingin ada area yang terisi di bawah garis paling bawah, atau di atas garis paling atas.
  • Kolom pertama akan selalu berada di bagian bawah grafik (persentil ke-5)
  • Kolom terakhir akan selalu berada di bagian atas grafik (persentil ke-95)
  • Saya memerlukan segmen area terpisah di antara setiap garis

Saya tahu saya perlu menentukan area yang harus diisi antara (y0, y1) seperti:

var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(BOTTOM); })
.y1(function(d) { return y(TOP); });

Namun saya tidak tahu apa yang harus dimasukkan untuk bagian .y1. Idealnya, saya hanya mengambil nilai berikutnya dari baris berikutnya di TSV, tapi saya tidak tahu bagaimana melakukannya dengan benar.

Untuk tujuan pengujian, saya memiliki yang berikut ini yang menciptakan SATU segmen area yang saya perlukan:

.y0(function(d) { return y(+d.p05); })
.y1(function(d) { return y(+d.p25); });

Saya menginginkan sesuatu seperti ini, tetapi contoh ini tidak membantu karena tidak merujuk pada baris yang berbeda dari csv/tsv:

http://bl.ocks.org/mbostock/4060954

masukkan deskripsi gambar di sini

Yang ini mirip, tapi bivariatnya, bukan multivariatnya.

http://bl.ocks.org/mbostock/3894205

masukkan deskripsi gambar di sini

Inilah pekerjaan saya yang sedang berlangsung (lihat sumber):

http://artfuladvection.com/project/NOAA/percentilesGraph/multipercentile.html

TSV saya diatur seperti ini:

date    p05 p25 p50 p75 p95
20140122    3   4   5   6   12
20140123    9   10  12  22  34
20140124    14  16  18  34  66

Ada bantuan?


d3.js linechart stream-graph
person DrewP84    schedule 22.01.2014    source sumber

Jawaban (1)


arrow_upward
2
arrow_downward

Untuk satu area, kodenya akan terlihat seperti ini.

var area = d3.svg.area()
  .x(function(d) { return x(d.date); })
  .y0(function(d) { return y(+d.p05); })
  .y1(function(d) { return y(+d.p25); });

per.append("g")
   .attr("class", "per")
   .append("path")
   .attr("class", "area")
   .attr("d", function (d) { return area(data); });

Untuk beberapa area, Anda dapat menggunakan domain skala color untuk mengulang nilai yang berbeda seperti yang telah Anda lakukan sebelumnya. Artinya, kode di atas akan dilingkarkan seperti ini.

var values = color.domain();
for(var i = 0; i < values.length() - 1; i ++) {
  var area = d3.svg.area()
    .x(function(d) { return x(d.date); })
    .y0(function(d) { return y(+d[values[i]]); })
    .y1(function(d) { return y(+d[values[i+1]]); });

  per.append("g")
     .attr("class", "per-" + values[i])
     .append("path")
     .attr("class", "area-" + values[i])
     .attr("d", function (d) { return area(data); });
}
person Lars Kotthoff    schedule 22.01.2014
comment
Terima kasih telah membantu, namun hal ini menciptakan area antara garis paling atas dan paling bawah. Saya kira saya tidak menjelaskan bahwa saya ingin segmen area terpisah di antara masing-masing garis. Lihat: artfuladvection.com/project/NOAA/percentilesGraph/ - person DrewP84; 23.01.2014
comment
Itu memang membantu saya mengetahui cara membuat SATU segmen area yang saya inginkan (lihat tautan WIP asli), tetapi saya tidak begitu mengerti cara membuat sisanya. - person DrewP84; 23.01.2014
comment
Benar, maaf, itu tidak jelas bagi saya. Akan memperbarui jawabannya. - person Lars Kotthoff; 23.01.2014
comment
Terima kasih Lars! Saya pikir itu berhasil -- Saya perlu memperbaiki warna untuk setiap segmen untuk memastikannya (saya juga belum tahu bagaimana melakukannya, heh), dan saya akan menerimanya. - person DrewP84; 23.01.2014