Блог

Главная - Вопросы по программированию - D3 с несколькими метками круговых диаграмм

D3 с несколькими метками круговых диаграмм

#javascript #d3.js #zooming #pie-chart #circle-pack

#javascript #d3.js #масштабирование #круговая диаграмма #circle-pack

Вопрос:

Я относительно новичок в D3, работаю с очень большим набором данных и пытаюсь создать очень большой массив круговых диаграмм. Однако я не могу понять, как разместить метки в самом верху каждой круговой диаграммы.

Мои данные, которые я использую, в настоящее время находятся в формате csv, подобном этому, и плоды будут метками, которые я хочу для круговых диаграмм

 [apple,90,36,2]
[pear,36,36,3]
[grape,19,13,0]

Я вставил свой приведенный ниже код с данными, которые для него работают, включенными ниже. Кроме того, в конечном итоге я хотел бы иметь возможность увеличивать масштаб данных и просматривать их с помощью уменьшенной функции, подобной этой:

http://mbostock.github.io/d3/talk/20111116/pack-hierarchy.html

введите описание изображения здесь

Если у кого-нибудь есть идея эффективно передать это, мы будем очень признательны. 

 <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Multiple Pie Charts</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.5"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.4.5"></script>
    <style type="text/css">


body {
  text-align: center;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">
var data = [
[90,36,2],
[36,36,3],
[19,13,0],
]
var m = 10,
    r = 100,
    z = d3.scale.category20c();
var svg = d3.select("body").selectAll("svg")
    .data(data)
  .enter().append("svg:svg")
    .attr("width", (r   m) * 2)
    .attr("height", (r   m) * 2)
  .append("svg:g")
    .attr("transform", "translate("   (r   m)   ","   (r   m)   ")");
svg.selectAll("path")
    .data(d3.layout.pie())
  .enter().append("svg:path")
    .attr("d", d3.svg.arc()
    .innerRadius(r / 2)
    .outerRadius(r))
    .style("fill", function(d, i) { return z(i); });

    </script>
  </body>
</html>

Ответ №1:

Вы могли бы использовать dc.js , это упрощает создание диаграмм d3 и сохраняет гибкость. На домашней странице этого проекта у них есть ссылка на аннотированный источник, чтобы вы могли увидеть, как его использовать.

Если у вас большой набор данных, я бы использовал что-то подобное, потому что он использует crossfilter для уменьшения ваших элементов данных только до тех, которые необходимо отобразить, что приводит к гораздо большей производительности.

Извините, я не ответил прямо на ваш вопрос о названии, но предложил другой способ сделать это, но мне никогда не приходилось этого делать, потому что я использую dc.js что делает все это намного проще.

Комментарии:

1. Классная идея, хотя и не совсем то, что я ищу. Спасибо за ваш вклад!

Ответ №2:

Понял это

 <!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

svg {
  padding: 10px 0 0 10px;
}

.arc {
  stroke: #fff;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var radius = 74,
    padding = 10;

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#2B8429"]);

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

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

d3.csv("data1.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "fruit"; }));

  data.forEach(function(d) {
    d.ages = color.domain().map(function(name) {
      return {name: name, population:  d[name]};
    });
  });

  var legend = d3.select("body").append("svg")
      .attr("class", "legend")
      .attr("width", radius * 2)
      .attr("height", radius * 2)
    .selectAll("g")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("transform", function(d, i) { return "translate(0,"   i * 20   ")"; });

  legend.append("rect")
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .text(function(d) { return d; });

  var svg = d3.select("body").selectAll(".pie")
      .data(data)
    .enter().append("svg")
      .attr("class", "pie")
      .attr("width", radius * 2)
      .attr("height", radius * 2)
    .append("g")
      .attr("transform", "translate("   radius   ","   radius   ")");

  svg.selectAll(".arc")
      .data(function(d) { return pie(d.ages); })
    .enter().append("path")
      .attr("class", "arc")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.name); });

  svg.append("text")
      .attr("dy", ".35em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.fruit; });

});

</script>