Многократные круговые диаграммы не загружаются - PullRequest
Новая
       14

Многократные круговые диаграммы не загружаются

0 голосов
/ 11 марта 2019

Я пытаюсь добавить несколько круговых диаграмм на одной странице, используя d3 js.Круговые диаграммы загружаются, когда им 2, но когда я добавляю третью круговую диаграмму, график не добавляется в SVG.[Вот мой полный код.] Мой фиддел: http://www.jsfiddle.net/SampathPerOxide/xt0L1scu/10/

  var h = 600;
  var r = h / 2;
  var arc = d3.svg.arc().outerRadius(r);

  var data = [{
        "label": "a",
        "value": 74
     },
     {
        "label": "b",
        "value": 7
     },
     {
        "label": "b",
        "value": 7
     },
     {
        "label": "d",
        "value": 12
     }
  ];
  var data1 = [{
        "label": "e",
        "value": 74
     },
     {
        "label": "f",
        "value": 7
     },
     {
        "label": "g",
        "value": 7
     },
     {
        "label": "h",
        "value": 12
     }
  ];

  var data2 = [{
        "label": "i",
        "value": 74
     },
     {
        "label": "j",
        "value": 7
     },
     {
        "label": "k",
        "value": 7
     },
     {
        "label": "l",
        "value": 12
     }
  ];
  var colors = [
     'rgb(178, 55, 56)',
     'rgb(213, 69, 70)',
     'rgb(230, 125, 126)',
     'rgb(239, 183, 182)'
  ]
  nv.addGraph(function() {
     var chart = nv.models.pieChart()
        .x(function(d) {
           return d.label
        })
        .y(function(d) {
           return d.value
        })
        .color(colors)
        .showLabels(true)
        .labelType("percent");

     d3.select("#chart svg")
        .datum(data)
        .transition().duration(1200)
        .call(chart);

     d3.selectAll(".nv-label text")
        .attr("transform", function(d) {
           d.innerRadius = -450;
           d.outerRadius = r;
           return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        /* Alter CSS attributes */
        .style({
           "font-size": "1em"
        });

     d3.selectAll('.nv-series').each(function(d, i) {
        var group = d3.select(this),
           circle = group.select('circle');
        var color = circle.style('fill');
        circle.remove();
        var symbol = group.append('path')
           .attr('d', d3.svg.symbol().type('square'))
           .style('stroke', color)
           .style('fill', color)
           .attr('transform', 'scale(1.5) translate(-2,0)')
     });
     return chart;
  });
  nv.addGraph(function() {
     var chartnew = nv.models.pieChart()
        .x(function(d) {
           return d.label
        })
        .y(function(d) {
           return d.value
        })
        .color(colors)
        .showLabels(true)
        .labelType("percent");

     d3.select("#chartnew svg")
        .datum(data1)
        .transition().duration(1200)
        .call(chartnew);

     d3.selectAll(".nv-label text")
        /* Alter SVG attribute (not CSS attributes) */
        .attr("transform", function(d) {
           d.innerRadius = -450;
           d.outerRadius = r;
           return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        .style({
           "font-size": "1em"
        });

     d3.selectAll('.nv-series').each(function(d, i) {
        var group = d3.select(this),
           circle = group.select('circle');
        var color = circle.style('fill');
        circle.remove();
        var symbol = group.append('path')
           .attr('d', d3.svg.symbol().type('square'))
           .style('stroke', color)
           .style('fill', color)
           .attr('transform', 'scale(1.5) translate(-2,0)')
     });
     return chartnew;
  });
  nv.addGraph(function() {
     var chartnewagains = nv.models.pieChart()
        .x(function(d) {
           return d.label
        })
        .y(function(d) {
           return d.value
        })
        .color(colors)
        .showLabels(true)
        .labelType("percent");

     d3.select("#chartnewagain svg")
        .datum(data2)
        .transition().duration(1200)
        .call(chartnewagains);

     d3.selectAll(".nv-label text")
        .attr("transform", function(d) {
           d.innerRadius = -450;
           d.outerRadius = r;
           return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        .style({
           "font-size": "1em"
        });

     d3.selectAll('.nv-series').each(function(d, i) {
        var group1 = d3.select(this),
           circle = group.select('circle');
        var color = circle.style('fill');
        circle.remove();
        var symbol = group.append('path')
           .attr('d', d3.svg.symbol().type('square'))
           .style('stroke', color)
           .style('fill', color)
           // ADJUST SIZE AND POSITION
           .attr('transform', 'scale(1.5) translate(-2,0)')
     });
     return chartnewagains;
  });

Как добавить пять круговых диаграмм на одну и ту же страницу, используя приведенный выше код?

Ответы [ 2 ]

1 голос
/ 11 марта 2019

Я не думаю, что решение, предложенное Донатом, будет работать, поскольку проблема заключается не только в выборе.Я упростил код, чтобы поместить data, data1, data2 в массив с именем alldata.Это позволило мне создать цикл forEach для каждого из циклов alldata и создать единую функцию рисования диаграмм, которая может рисовать круговую диаграмму для данных.После долгих поисков неисправностей я обнаружил, что проблема в коде - добавление легенд данных, которые и вызывали проблему.Кажется, circle.remove(); был причиной проблемы.Я отредактировал код в скрипте ниже, который исправляет проблему, удаляя кружок, используя лучший выбор.

Вот полная рабочая скрипка с улучшенным кодом, чтобы его было легче читать: https://jsfiddle.net/coolakul/z1b2p7x3/

Надеюсь, это поможет.Дайте мне знать, если вам нужно что-то разъяснить.

1 голос
/ 11 марта 2019

Вы должны сосредоточить свой выбор на каждом SVG.Итак, сначала выберите текущий SVG: 

const svg = d3.select("#chartnewagain svg")

, затем 

svg.selectAll(".nv-label text")
svg.selectAll('.nv-series')

Потому что, когда вы используете d3.selectAll (". Что-то"), вы выбираете все с помощью класса .something (также в SVG), и вы этого не хотите.

Надеюсь, это поможет:)

РЕДАКТИРОВАТЬ: проблема заключается в 

 d3.selectAll('.nv-series').each(function(d, i) {
  var group = d3.select(this),
    circle = group.select('circle');
  console.log(circle)  
  var color = circle.style('fill');  // error
...

Потому что, когда вы делаетев первый раз '.nv-series' выбирается из первого svg и все в порядке.Во второй раз '.nv-series' выбирается из первого и второго svg, и, поскольку вы уже удалили этот круг в первый раз, он выдает ошибку, когда вам нужно получить стиль из элемента, который он не может найти с помощью circle = group.select('circle')

Итак, решение: 

const svg = d3.select("#div_id svg")
...
svg.selectAll(".nv-label text")
...
svg.selectAll('.nv-series')
...

для каждого экземпляра

...