标签名称不会从d3.js的饼图转换图中的输入数据显示 [英] Label names are not displayed from input data in pie transition chart of d3.js

问题描述

我使用d3.js绘制饼图转换图表。但是当标签放置在数据数组中如下所示：

  data = [{label：sector1， value：25}，{label：sector2，value：45}] 
  

不会显示饼图。

pre> var w = 400，
h = 400，
r = Math.min（w，h）/ 2，
data = [{label ：sector1，value：25}，{label：sector2，value：45}]，//带有标签值对的数据
color = d3.scale.category20 ，
arc = d3.svg.arc（）。outerRadius（r），
donut = d3.layout.pie（）;

var vis = d3.select（body）append（svg）//将图表放在'pie-chart-div'中
.data（[data]）
.attr（width，w）
.attr（height，h）;

var arcs = vis.selectAll（g.arc）
.data（donut）
.enter（）。append（g）
。 attr（class，arc）
.attr（transform，translate（+ r +，+ r +））;

var paths = arcs.append（path）
.attr（fill，function（d，i）{return color（i）;}）;

var labels = arcs.append（text）
.attr（transform，function（d）{d.innerRadius = 120; returntranslate（+ arc.centroid （d）+）;}）
.attr（dy，.35em）
.text（function（d）{return d.value;}）;

paths.transition（）
.ease（bounce）
.duration（2000）
.attrTween（d，tweenPie）;

paths.transition（）
.ease（elastic）
.delay（function（d，i）{return 2000 + i * 50;}）
.duration（750）
.attrTween（d，tweenDonut）;

function tweenPie（b）{
b.innerRadius = 0;
var i = d3.interpolate（{startAngle：0，endAngle：0}，b）;
return function（t）{
return arc（i（t））;
};
}

function tweenDonut（b）{
b.innerRadius = r * .6;
var i = d3.interpolate（{innerRadius：0}，b）;
return function（t）{
return arc（i（t））;
};
}


< script src =https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js> ;< / script>


如何显示标签名称以及图表中的值？

解决方案

您需要使用您的数据调用 donut

  data2 = data.map（function（d）{return d.value}）// [25，45] 
 ... 
 .data（donut（data2））
  

标签;

  .text（function（d，i）{return data [i] .label;}）; 
  

请参阅 http://jsfiddle.net/980f0cdj/1/

I am using d3.js to draw a pie transition chart. But when labels are placed in the data array as show below:

data = [{"label":"sector1", "value":25}, {"label":"sector2", "value":45}]  

The pie chart won't be displayed. Instead "NaN" will be printed.

The complete code is pasted below:

var w = 400,
h = 400,
r = Math.min(w, h) / 2,
data = [{"label":"sector1", "value":25}, {"label":"sector2", "value":45}],   // Data with label-value pairs
color = d3.scale.category20(),
arc = d3.svg.arc().outerRadius(r),
donut = d3.layout.pie();

var vis = d3.select("body").append("svg")  // Place the chart in 'pie-chart-div'
    .data([data])
    .attr("width", w)
    .attr("height", h);

var arcs = vis.selectAll("g.arc")
    .data(donut)
  .enter().append("g")
    .attr("class", "arc")
    .attr("transform", "translate(" + r + "," + r + ")");

var paths = arcs.append("path")
    .attr("fill", function(d, i) { return color(i); });

var labels = arcs.append("text")
      .attr("transform", function(d) { d.innerRadius = 120; return "translate(" + arc.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .text(function(d) { return d.value; });

paths.transition()
    .ease("bounce")
    .duration(2000)
    .attrTween("d", tweenPie);

paths.transition()
    .ease("elastic")
    .delay(function(d, i) { return 2000 + i * 50; })
    .duration(750)
    .attrTween("d", tweenDonut);

function tweenPie(b) {
  b.innerRadius = 0;
  var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
  return function(t) {
    return arc(i(t));
  };
}

function tweenDonut(b) {
  b.innerRadius = r * .6;
  var i = d3.interpolate({innerRadius: 0}, b);
  return function(t) {
    return arc(i(t));
  };
} 


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

How to display the label names along with the values in the chart ?

解决方案

You need to call donut with your data inside like that :

data2 = data.map(function(d) { return d.value}) // [25, 45]
...
.data(donut(data2))

and then call the label ;

  .text(function(d, i) { return data[i].label; });

See http://jsfiddle.net/980f0cdj/1/

这篇关于标签名称不会从d3.js的饼图转换图中的输入数据显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！