d3軸標記

Question

如何在d3中為軸添加文本標簽？

例如，我有一個帶有x和y軸的簡單折線圖。

在我的x軸上，我有從1到10的刻度。我想在它下面出現“天”這個詞，所以人們知道x軸正在計算天數。

同樣，在y軸上，我將數字1-10作為刻度，我希望“吃三明治”這兩個詞出現在側面。

有一個簡單的方法嗎？

Answer 1

軸標簽不是內置於D3的軸組件 ，但您可以通過添加SVG text元素自行添加標簽。 這方面的一個很好的例子是我重新創造了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 ）。

Answer 2

在新的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");

Answer 3

如果你想像我一樣在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所述。

Answer 4

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

Answer 5

如果您按照建議使用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)");

擺弄全球css / js

Answer 6

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

要么

xAxis: {
   axisLabel: 'Label here'
},