การติดฉลากแกน d3

ฉันจะเพิ่มป้ายข้อความให้กับแกนใน d3 ได้อย่างไร

ตัวอย่างเช่นฉันมีกราฟเส้นธรรมดาที่มีแกน x และ y

บนแกน x ของฉันฉันมีขีดตั้งแต่ 1 ถึง 10 ฉันต้องการให้คำว่า "วัน" ปรากฏอยู่ข้างใต้เพื่อให้ผู้คนรู้ว่าแกน x กำลังนับวัน

ในทำนองเดียวกันบนแกน y ฉันมีตัวเลข 1-10 เป็นขีดและฉันต้องการให้คำว่า "แซนวิชกิน" ปรากฏด้านข้าง

มีวิธีง่ายๆในการทำเช่นนี้หรือไม่?

ป้ายชื่อแกนไม่ได้อยู่ในส่วนประกอบแกนของ D3 แต่คุณสามารถเพิ่มป้ายกำกับด้วยตัวคุณเองได้ง่ายๆโดยการเพิ่มtextองค์ประกอบSVG เป็นตัวอย่างที่ดีของที่นี่คือการพักผ่อนหย่อนใจของฉัน Gapminder แผนภูมิฟองภาพเคลื่อนไหวความมั่งคั่งและสุขภาพแห่งชาติ ป้ายชื่อแกน x มีลักษณะดังนี้:

svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("income per capita, inflation-adjusted (dollars)");

และป้ายแกน y เป็นดังนี้:

svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("life expectancy (years)");

คุณยังสามารถใช้สไตล์ชีตเพื่อจัดรูปแบบป้ายกำกับเหล่านี้ได้ตามต้องการไม่ว่าจะร่วมกัน ( .label) หรือทีละรายการ ( .x.label, .y.label)

ในเวอร์ชัน D3js ใหม่ (เวอร์ชัน 3 เป็นต้นไป) เมื่อคุณสร้างแกนแผนภูมิผ่านd3.svg.axis()ฟังก์ชันคุณจะสามารถเข้าถึงวิธีการสองวิธีที่เรียกว่าtickValuesและtickFormatซึ่งมีอยู่ในตัวภายในฟังก์ชันเพื่อให้คุณสามารถระบุค่าที่คุณต้องการติ๊กสำหรับและในสิ่งใด รูปแบบที่คุณต้องการให้ข้อความปรากฏ:

var formatAxis = d3.format("  0");
var axis = d3.svg.axis()
        .scale(xScale)
        .tickFormat(formatAxis)
        .ticks(3)
        .tickValues([100, 200, 300]) //specify an array here for values
        .orient("bottom");

หากคุณต้องการให้ป้ายแกน y อยู่ตรงกลางแกน y เหมือนที่ฉันทำ:

1. หมุนข้อความ 90 องศาโดยมีจุดยึดกลางข้อความ
2. แปลข้อความตามจุดกึ่งกลาง
   • ตำแหน่ง x: เพื่อป้องกันการทับซ้อนกันของป้ายกำกับแกน y ( -50)
   • ตำแหน่ง y: เพื่อให้ตรงกับจุดกึ่งกลางของแกน y ( chartHeight / 2)

ตัวอย่างโค้ด:

var axisLabelX = -50;
var axisLabelY = chartHeight / 2;

chartArea
    .append('g')
    .attr('transform', 'translate(' + axisLabelX + ', ' + axisLabelY + ')')
    .append('text')
    .attr('text-anchor', 'middle')
    .attr('transform', 'rotate(-90)')
    .text('Y Axis Label')
    ;

สิ่งนี้จะป้องกันการหมุนระบบพิกัดทั้งหมดตามที่ lubar กล่าวไว้ข้างต้น

หากคุณทำงานใน d3.v4 ตามที่แนะนำคุณสามารถใช้อินสแตนซ์นี้เพื่อเสนอทุกสิ่งที่คุณต้องการ

คุณอาจแค่ต้องการแทนที่ข้อมูลแกน X ด้วย "วัน" ของคุณ แต่อย่าลืมแยกวิเคราะห์ค่าสตริงให้ถูกต้องและอย่าใช้แบบเรียงต่อกัน

parseTime อาจใช้เคล็ดลับสำหรับวันที่ปรับขนาดด้วยรูปแบบวันที่หรือไม่

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

data.forEach(function(d) {
  d.year = parseTime(d.year);
  d.value = +d.value;
});

x.domain(d3.extent(data, function(d) { return d.year; }));
y.domain([d3.min(data, function(d) { return d.value; }) / 1.005, d3.max(data, function(d) { return d.value; }) * 1.005]);

g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));


g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y).ticks(6).tickFormat(function(d) { return parseInt(d / 1000) + "k"; }))
  .append("text")
    .attr("class", "axis-title")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .attr("fill", "#5D6971")
    .text("Population)");

ซอกับ global css / js

D3 มีชุดส่วนประกอบระดับต่ำที่คุณสามารถใช้ประกอบแผนภูมิได้ คุณจะได้รับแบบเอกสารสำเร็จรูปส่วนประกอบแกนการรวมข้อมูลการเลือกและ SVG เป็นหน้าที่ของคุณที่จะรวบรวมพวกเขาเข้าด้วยกันเพื่อสร้างแผนภูมิ!

หากคุณต้องการแผนภูมิธรรมดาคือคู่ของแกนแกนป้ายกราฟชื่อและพื้นที่แปลงที่ทำไมไม่ได้ดูที่d3fc ? เป็นชุดโอเพนซอร์สของส่วนประกอบ D3 ระดับสูง ประกอบด้วยส่วนประกอบแผนภูมิคาร์ทีเซียนที่อาจเป็นสิ่งที่คุณต้องการ:

var chart = fc.chartSvgCartesian(
    d3.scaleLinear(),
    d3.scaleLinear()
  )
  .xLabel('Value')
  .yLabel('Sine / Cosine')
  .chartLabel('Sine and Cosine')
  .yDomain(yExtent(data))
  .xDomain(xExtent(data))
  .plotArea(multi);

// render
d3.select('#sine')
  .datum(data)
  .call(chart);

คุณสามารถดูตัวอย่างที่สมบูรณ์เพิ่มเติมได้ที่นี่: https://d3fc.io/examples/simple/index.html

chart.xAxis.axisLabel('Label here');

หรือ

xAxis: {
   axisLabel: 'Label here'
},