Question

我如何使用像这样的json数据在d3js中绘制饼图或条形图？

{"ratings": {"2": 1, "3": 3, "4": 12, "1": 8, "5": 33} }

或者这些：

{"languages": {"1": 35, "2": 22}}

请帮忙！

Answer 1

如下所示转换数据并在饼图中使用。

var actualData = {
  "ratings": {
    "2": 1,
    "3": 3,
    "4": 12,
    "1": 8,
    "5": 33
  }
};

var data = d3.values(actualData.ratings).map(function(v, i) {
  return {
    key: i + 1,
    value: v
  }
});

var width = 960,
  height = 500,
  radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

var labelArc = d3.svg.arc()
  .outerRadius(radius - 40)
  .innerRadius(radius - 40);

var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) {
    return d.value;
  });

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var actualData = {
  "ratings": {
    "2": 1,
    "3": 3,
    "4": 12,
    "1": 8,
    "5": 33
  }
};

var data = d3.values(actualData.ratings).map(function(v, i) {
  return {
    key: i + 1,
    value: v
  }
});

console.log(data)

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(d.data.key);
  });

g.append("text")
  .attr("transform", function(d) {
    return "translate(" + labelArc.centroid(d) + ")";
  })
  .attr("dy", ".35em")
  .text(function(d) {
    return d.data.key;
  });

function type(d) {
  d.value = +d.value;
  return d;
}

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

d3js中的JSON数据

1 个答案: