d3轴标记

tkclm6bt  于 2024-01-08  发布在  其他
关注(0)|答案(7)|浏览(123)

如何在d3中为坐标轴添加文本标签?
例如,我有一个简单的折线图,有x轴和y轴。
在我的x轴上,我有从1到10的刻度。我希望“天”这个词出现在它下面,这样人们就知道x轴是在计算天数。
类似地,在y轴上,我将数字1-10作为刻度,我希望单词“sandwiches eated”横向显示。
有没有一个简单的方法来做到这一点?

kd3sttzy

kd3sttzy1#

D3的axis component没有内置轴标签,但是你可以通过添加一个SVG text元素来自己添加标签。一个很好的例子是我对Gapminder的动画气泡图The Wealth & Health of Nations的重新创建。x轴标签看起来像这样:

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

字符串
Y轴的标签是这样的:

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


您还可以使用样式表来设置这些标签的样式,无论是一起(.label)还是单独(.x.label.y.label)。

展开查看全部
q5iwbnjs

q5iwbnjs2#

在新的D3js版本(版本3及以后)中,当您通过d3.svg.axis()函数创建图表轴时,您可以访问两个名为tickValuestickFormat的方法,这两个方法内置在函数中,以便您可以指定需要哪些值的刻度以及希望文本显示的格式:

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

字符串

46scxncf

46scxncf3#

如果你想像我一样把y轴的标签放在y轴的中间:
1.使用文本锚点中间旋转文本90度

  • 按文本的中点翻译文本
  • x位置:防止y轴刻度标签重叠(-50
  • y位置:与y轴中点(chartHeight / 2)匹配

代码示例:

  1. var axisLabelX = -50;
  2. var axisLabelY = chartHeight / 2;
  3. chartArea
  4. .append('g')
  5. .attr('transform', 'translate(' + axisLabelX + ', ' + axisLabelY + ')')
  6. .append('text')
  7. .attr('text-anchor', 'middle')
  8. .attr('transform', 'rotate(-90)')
  9. .text('Y Axis Label')
  10. ;

字符串
这防止了旋转整个坐标系,如上文lubar所述。

展开查看全部
yjghlzjz

yjghlzjz4#

如果您使用d3.v4,就像建议的那样,您可以使用这个示例提供您需要的一切。
您可能只想用“天”替换X轴数据,但请记住正确解析字符串值,不要应用连接。
parseTime也可以用日期格式来处理天数缩放?

  1. d3.json("data.json", function(error, data) {
  2. if (error) throw error;
  3. data.forEach(function(d) {
  4. d.year = parseTime(d.year);
  5. d.value = +d.value;
  6. });
  7. x.domain(d3.extent(data, function(d) { return d.year; }));
  8. y.domain([d3.min(data, function(d) { return d.value; }) / 1.005, d3.max(data, function(d) { return d.value; }) * 1.005]);
  9. g.append("g")
  10. .attr("class", "axis axis--x")
  11. .attr("transform", "translate(0," + height + ")")
  12. .call(d3.axisBottom(x));
  13. g.append("g")
  14. .attr("class", "axis axis--y")
  15. .call(d3.axisLeft(y).ticks(6).tickFormat(function(d) { return parseInt(d / 1000) + "k"; }))
  16. .append("text")
  17. .attr("class", "axis-title")
  18. .attr("transform", "rotate(-90)")
  19. .attr("y", 6)
  20. .attr("dy", ".71em")
  21. .style("text-anchor", "end")
  22. .attr("fill", "#5D6971")
  23. .text("Population)");

字符串
fiddle with global css / js

展开查看全部
70gysomp

70gysomp5#

D3提供了一组非常低级别的组件,您可以使用它们来组装图表。您将获得构建块,轴组件,数据连接,选择和SVG。您的工作是将它们组合在一起以形成图表!
如果你想要一个传统的图表,即一对轴,轴标签,图表标题和绘图区域,为什么不看看d3fc?它是一个开源的更高级别的D3组件集。它包括一个可能是你需要的图表组件:

  1. var chart = fc.chartSvgCartesian(
  2. d3.scaleLinear(),
  3. d3.scaleLinear()
  4. )
  5. .xLabel('Value')
  6. .yLabel('Sine / Cosine')
  7. .chartLabel('Sine and Cosine')
  8. .yDomain(yExtent(data))
  9. .xDomain(xExtent(data))
  10. .plotArea(multi);
  11. // render
  12. d3.select('#sine')
  13. .datum(data)
  14. .call(chart);

字符串
你可以在这里看到一个更完整的例子:https://d3fc.io/examples/simple/index.html

展开查看全部
9jyewag0

9jyewag06#

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

字符串

  1. xAxis: {
  2. axisLabel: 'Label here'
  3. },

wqlqzqxt

wqlqzqxt7#

在D3.js中自定义轴
https://ghenshaw-work.medium.com/customizing-axes-in-d3-js-99d58863738b

  1. let xAxisGenerator = d3.axisBottom(xScale);
  2. let tickLabels = ['A','B','C'];
  3. xAxisGenerator.tickFormat((d,i) => tickLabels[i]);

字符串

相关问题