Диаграмма с несколькими пончиками не показывает процент - PullRequest
Новая
       43

Диаграмма с несколькими пончиками не показывает процент

2 голосов
/ 14 января 2020

Я пытаюсь показать несколько диаграмм пончиков на одной странице. Но это не показ. Я использую al oop для создания этого графика и добавил несколько html id, чтобы показать это. 


var details = [{category: "Doctor", number: 25}, {category: "Shopping", number: 20}, { category: "Restaurants", number: 10}, {    category: "FastFood", number: 5}, { category: "Internet", number: 8},{ category: "Other", number: 32}];
for (i = 1; i <= 4; i++) 
    chartScript(details, '#custom-chart-' + i);
function chartScript(details, cls) {
    var width = 300,
        height = 500;
    var colors = d3.scaleOrdinal(d3.schemeDark2);
    var svg = d3.select(cls).append("svg")
        .attr("width", width).attr("height", height);
    details.sort(function (a, b) {
        return b['number'] - a['number'];
    });

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

    var segments = d3.arc()
        .innerRadius(80)
        .outerRadius(150)
        .padAngle(.05)
        .padRadius(30);
    var sections = svg.append("g").attr("transform", "translate(150,250)").selectAll("path").data(data);
    sections.enter().append("path").attr("d", segments).attr("fill", function (d) {
        return colors(d.data.number);
    });
    var content = d3.select("g").selectAll("text").data(data);
    content.enter().append("text").classed("inside", true).each(function (d) {
        var center = segments.centroid(d);
        d3.select(this).attr("x", center[0]).attr("y", center[1]).text(d.data.number + '%')
    })
}

Я получил такой вывод (1-й показывает%, а другие нет): enter image description here

Ответы [ 2 ]

2 голосов
/ 14 января 2020

Вы используете d3 следующим образом 

   var sections = svg.append("g").attr("transform", "translate(150,250)")

и в этой строке 

var content = d3.select("g").selectAll("text").data(data);

вместо d3. Вы должны использовать 

var content = sections.select("g").selectAll("text").data(data);

Таким образом, это будет выделите все теги <g> в разделах

1 голос
/ 14 января 2020

Как правило: в коде D3 никогда не используйте al oop (for, while, forEach et c ...) для добавления элементов.

Так что просто измените это неловкое значение l oop для правильного выбора D3 ... 

var cls = d3.select("body").selectAll(null)
  .data(d3.range(4))
  .enter()
  .append("div");

... и вы не только исправите упомянутую проблему, но и избежите проблем в будущем.

Вот демоверсия с использованием (большей части) вашего кода: 

var details = [{
  category: "Doctor",
  number: 25
}, {
  category: "Shopping",
  number: 20
}, {
  category: "Restaurants",
  number: 10
}, {
  category: "FastFood",
  number: 5
}, {
  category: "Internet",
  number: 8
}, {
  category: "Other",
  number: 32
}];
var cls = d3.select("body").selectAll(null)
  .data(d3.range(4))
  .enter()
  .append("div");
var width = 180,
  height = 180;
var colors = d3.scaleOrdinal(d3.schemeDark2);
var svg = cls.append("svg")
  .attr("width", width).attr("height", height);
details.sort(function(a, b) {
  return b['number'] - a['number'];
});

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

var segments = d3.arc()
  .innerRadius(45)
  .outerRadius(85)
  .padAngle(.05)
  .padRadius(30);
var g = svg.append("g").attr("transform", "translate(90,90)");

var sections = g.selectAll("path").data(data);
sections.enter().append("path").attr("d", segments).attr("fill", function(d) {
  return colors(d.data.number);
});
var content = g.selectAll("text").data(data);
content.enter().append("text").classed("inside", true).each(function(d) {
  var center = segments.centroid(d);
  d3.select(this).attr("x", center[0]).attr("y", center[1]).text(d.data.number + '%')
})
div {
  display: inline-block;
}

text {
  text-anchor: middle;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
...