如何在“甜甜圈图表”中填写单个值

时间:2015-07-22 11:47:35

标签: d3.js

我从服务器获取当前状态。从服务器信息中我需要显示已完成作品的当前状态。

像这样:

enter image description here

我在这里尝试,但我没有得到结果。 这是我的代码:

var data = [45] //say value i get.

var width = 400,
    height = 400,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .range(["#ffff00", "#1ebfc5"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 90)
    .innerRadius(radius - 80);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


 var g = svg.selectAll(".arc")
      .data(pie(data))
        .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(color[0]); });

Live Demo

1 个答案:

答案 0 :(得分:1)

你可能只是得到一个完整的圆圈,对吗?

嗯,d3代表数据驱动的文档,这意味着它无法显示不存在的数据。

基本上,为了解决这个问题,您只需要数据集中的计数器值:我已修复了以下代码:

var data = [45, 55] //as you see, i have added 55 (100-45).

var width = 400,
    height = 400,
    radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
    .domain(data)
    .range(["#ffff00", "#1ebfc5"]);

var arc = d3.svg.arc()
    .outerRadius(radius - 90)
    .innerRadius(radius - 80);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


 var g = svg.selectAll(".arc")
      .data(pie(data))
        .enter().append("g")
      .attr("class", "arc");

  g.append("path")
      .attr("d", arc)
      .style("fill", function(d,i) { return color(d.data); });

修改 我也改变了你的色彩。在代码的最后你做“返回颜色(颜色[0])”,它总是返回相同的颜色。因此,即使你的甜甜圈图表中有2个不同的部分,它们的颜色也是相同的,你也不会注意到它们之间的区别:-)。使用d3内置数据变量。对于弧/饼,变量d也只返回原始数据,它返回一个自定义对象。您的数据存储在d.data中,您可以在我包含的代码中看到它。