ต้องการความช่วยเหลือในการวางแผนพื้นที่ระหว่างเส้นหลายตัวแปร ไม่ใช่จากแกนหนึ่งไปอีกเส้นหนึ่ง

ฉันเพิ่งเริ่มใช้ d3.js และฉันกำลังดิ้นรนที่จะเติมพื้นที่ระหว่างเส้นในกราฟเปอร์เซ็นไทล์หลายตัวแปร

  • ฉันไม่ต้องการให้พื้นที่ใดๆ อยู่ต่ำกว่าบรรทัดล่างสุดหรือเหนือบรรทัดบนสุด
  • คอลัมน์แรกจะอยู่ที่ด้านล่างของกราฟเสมอ (เปอร์เซ็นไทล์ที่ 5)
  • คอลัมน์สุดท้ายจะอยู่ที่ด้านบนของกราฟเสมอ (เปอร์เซ็นไทล์ที่ 95)
  • ฉันต้องการส่วนพื้นที่แยกระหว่างแต่ละบรรทัด

ฉันรู้ว่าฉันต้องกำหนดพื้นที่ที่จะเติมระหว่าง (y0, y1) ดังนี้:

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

อย่างไรก็ตาม ฉันไม่รู้ว่าจะใส่อะไรลงในส่วน .y1 ตามหลักการแล้ว ฉันแค่คว้าค่าถัดไปของแถวถัดไปใน TSV แต่ฉันไม่รู้ว่าต้องทำอย่างไร

เพื่อวัตถุประสงค์ในการทดสอบ ฉันมีสิ่งต่อไปนี้ซึ่งสร้างส่วนพื้นที่หนึ่งส่วนที่ฉันต้องการ:

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

ฉันต้องการสิ่งนี้ แต่ตัวอย่างนี้ไม่ช่วยอะไรเนื่องจากไม่ได้อ้างอิงแถวอื่นจาก csv/tsv:

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

ป้อนคำอธิบายรูปภาพที่นี่

อันนี้คล้ายกัน แต่เป็นไบวาเรียต ไม่ใช่หลายตัวแปร

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

ป้อนคำอธิบายรูปภาพที่นี่

นี่คืองานของฉันที่กำลังดำเนินการ (ดูแหล่งที่มา):

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

TSV ของฉันได้รับการตั้งค่าดังนี้:

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

ความช่วยเหลือใด ๆ ?


d3.js linechart stream-graph
person DrewP84    schedule 22.01.2014    source แหล่งที่มา

คำตอบ (1)


arrow_upward
2
arrow_downward

สำหรับพื้นที่เดียว โค้ดจะมีลักษณะดังนี้

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

สำหรับหลายพื้นที่ คุณสามารถใช้โดเมนของสเกล color ของคุณเพื่อวนซ้ำค่าต่างๆ เหมือนที่คุณเคยทำมาก่อน นั่นคือโค้ดด้านบนจะวนซ้ำแบบนี้

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
ขอขอบคุณที่ช่วยเหลือ อย่างไรก็ตาม สิ่งนี้จะสร้างพื้นที่ระหว่างบรรทัดบนสุดและล่างสุด ฉันคิดว่าฉันไม่ได้ชี้แจงว่าฉันต้องการแบ่งส่วนพื้นที่ระหว่างแต่ละบรรทัด ดู: artfuladvection.com/project/NOAA/percentilesGraph/ - person DrewP84; 23.01.2014
comment
นั่นช่วยให้ฉันทราบวิธีสร้างส่วนพื้นที่หนึ่งส่วนที่ฉันต้องการ (ดูลิงก์ WIP ดั้งเดิม) แต่ฉันไม่ค่อยเข้าใจวิธีสร้างส่วนที่เหลือ - person DrewP84; 23.01.2014
comment
ใช่ ขอโทษที ฉันไม่ชัดเจนสำหรับฉัน จะอัพเดตคำตอบครับ - person Lars Kotthoff; 23.01.2014
comment
ขอบคุณลาร์ส! ฉันคิดว่ามันได้ผล ฉันต้องแก้ไขสีสำหรับแต่ละส่วนเพื่อให้แน่ใจว่า (ฉันยังไม่รู้ว่าต้องทำอย่างไรเหมือนกัน อิอิ) และฉันจะยอมรับ - person DrewP84; 23.01.2014