d3.js：如何在圆环图中的标签下面添加值 [英] d3.js: How to add value below the label in donut chart

问题描述

我是d3.js的新用户，我现在所做的是

  var dataset = [{
 label： '，
 value：35 
}，{
 label：'parked'，
 value：65 
}]; 
  

如何实现？

解决方案

您可以使用以下代码更新附加文字代码。

  text.enter（）
 .append（text）
 .attr（dy，.35em）
 .append svg：tspan'）
 .attr（'x'，0）
 .attr（'dy'，0）
 .text（function（d）{return d.data.label; }）
 .append（'svg：tspan'）
 .attr（'x'，0）
 .attr（'dy'，20）
 .text d）{return d.data.value;}）; 
  

将两个 tspan 附加到您的 text 元素

已更新小提琴这里

I am new to d3.js and what I have achieved till now is, this using tutorials and videos.

Now I am trying to add the dataset.value below the label text as shown in the figure.

var dataset = [{
  label: 'On trip',
  value: 35
}, {
  label: 'parked',
  value: 65 
}];

How do I achieve this?

解决方案

You can update your append text code with following code.

text.enter()
 .append("text")
 .attr("dy", ".35em")
 .append('svg:tspan')
 .attr('x', 0)
 .attr('dy', 0)
 .text(function(d) { return d.data.label; })
 .append('svg:tspan')
 .attr('x', 0)
 .attr('dy', 20)
 .text(function(d) { return d.data.value; });

Append two tspan to your text element

Updated Fiddle here

这篇关于d3.js：如何在圆环图中的标签下面添加值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！