D3 не работает в internet Explorer 11

143

16 января 2020, 16:20

Вот подключение D3 версии 5.7

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="responsive.css">
    <link rel="stylesheet" type="text/css" href="slick/slick.css">
    <link rel="stylesheet" type="text/css" href="vendors/css/select2.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
    <script src="js/charts.js"></script>
    <link rel="icon" type="image/png" href="favicon/favicon.ico" sizes="16x16">
    <title>Allbc</title>
</head>

Вот файл charts.js

window.onload = function() {
  function chart(data){
    let arc = d3.arc().cornerRadius(10).startAngle(0);
    let svg = d3.select('.chart');
    let size = Math.PI*3/2;
    arcs(true);
    arcs(false);
    svg.selectAll('text').data(data).enter().append('text')
       .text( d => d.text)
       .style('font-size', 10)
       .style('text-anchor', 'end')
       .style('font-family', 'arial')
       .attr('x', -10)
       .attr('y', d => d.index*14-65)
    function arcs(isBg) {
      let selection = svg.selectAll('path.'+ (isBg ? 'bg' : 'arc'))
      selection = selection.data(data).enter().append('path').merge(selection);
      selection.classed(isBg ? 'bg' : 'arc', true)
        .attr('fill', d => isBg ? '#ccc' : d.color)
        .attr('d', d => arc({
          innerRadius: 20 + d.index*15 + (d.index?0:3),
          outerRadius: 20 + d.index*15 + 8,
          endAngle: isBg ? size : d.value*size/100
        }))
    }
  }
  chart([ 
    [20, '#0578e9', "142 000 м²"], 
    [40, '#f278bb', "82 000 м²"], 
    [60, '#f9b349', "60 000 м²"], 
    [80, '#3eb060', "20 000 м²"]
  ].map((d, i) => ({
    index: i, 
    color: d[1],
    value: d[0],
    text: d[2]
  })));
}

График не отображается в Intenet Explorer 11, а в остальных браузерах он работает. Как заставить его работать в Internet Explorer 11 тоже?

Answer 1

Отправлено из IE, как и сказали в комментариях необходимо и достаточно убрать стрелочные функции

function chart(data) { 
  let arc = d3.arc().cornerRadius(10).startAngle(0); 
  let svg = d3.select('.chart'); 
  let size = Math.PI*3/2; 
  arcs(true); 
  arcs(false); 
  svg.selectAll('text').data(data).enter().append('text') 
     .text( function(d) { 
        return d.text; 
     }) 
     .style('font-size', 10) 
     .style('text-anchor', 'end') 
     .style('font-family', 'arial') 
     .attr('x', -10) 
     .attr('y', function(d){ 
      return d.index*14-65; 
     }) 
 
  function arcs(isBg) { 
    let selection = svg.selectAll('path.'+ (isBg ? 'bg' : 'arc')) 
    selection = selection.data(data).enter().append('path').merge(selection); 
    selection.classed(isBg ? 'bg' : 'arc', true) 
      .attr('fill', function(d) { 
        return isBg ? '#ccc' : d.color; 
      }) 
      .attr('d', function(d){ 
        return arc({ 
          innerRadius: 20 + d.index*15 + (d.index?0:3), 
          outerRadius: 20 + d.index*15 + 8, 
          endAngle: isBg ? size : d.value*size/100 
        }); 
      }); 
  } 
 
} 
 
chart([  
  [20, '#0578e9', "142 000 м²"],  
  [40, '#f278bb', "82 000 м²"],  
  [60, '#f9b349', "60 000 м²"],  
  [80, '#3eb060', "20 000 м²"] 
].map(function (d, i) { 
  return { 
    index: i,  
    color: d[1], 
    value: d[0], 
    text: d[2] 
  } 
}));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> 
 <svg class="chart" viewbox="-100 -100 200 200"></svg>

Создание сайта для салона красоты в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Помогите с запросом в базу

Вообщем надо чтобы давало всем параметры юзерам которые есть в определённом кланеНо у меня получается только для 1 юзера

159

MySQL

Python. Поиск записи в базе данных

Такой код:

159

MySQL

Как увеличить MySQL тайм-аут с 8 часов до 24?

У меня стоит сервер, и мне нужно чтобы его соединение с базами данных висело постоянноПотому что, есть подозрения, что при сбросе соединения...

161

HTML

Bootstrap. Мобильные устройства

Всем приветНе думал, что придется сюда обращаться

141