d3轴标签

如何在d3中的轴上添加文本标签？

例如，我有一个带有x和y轴的简单线图。

在我的x轴上，我打勾的范围是1到10。我希望单词“ days”出现在它的下面，以便人们知道x轴是在计算天数。

同样，在y轴上，我用数字1-10作为刻度，我希望“吃的三明治”一词出现在侧面。

有没有简单的方法可以做到这一点？

轴标签不是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））。

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

摆弄全球的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'
},