Как сделать две фигуры D3 Ar c на одной странице? - PullRequest
Новая
       34

Как сделать две фигуры D3 Ar c на одной странице?

0 голосов
/ 29 января 2020

Я создаю 2 фигуры Ar c рядом друг с другом. Мне нужно, чтобы они были фигурами, а не р ie диаграммами для последующих манипуляций. Я нашел этот код из этого Bl.ock Bl.ock , но показывает только первый. Я изменил их имена SVG, и это тоже не работает. Второй svg показывает, но не имеет размеров. 

<body>
<div id="Arc1">
  <svg width="700" height="220">
    <g transform="translate(300, 110)"></g>
  </svg>
</div>
<div id="Arc2">
 <svg width="700" height="220">
    <g transform="translate(300, 110)"></g>
  </svg>
</div>
    <script src='http://d3js.org/d3.v4.min.js'></script>
  <script>
// Create an arc generator with configuration and accessor functions

var arcGenerator1 = d3.arc()
    .innerRadius(20)
    .outerRadius(100)
      .startAngle(function(d) { 
        return d.startAngleOfMyArc;
    })
    .endAngle(function(d) {
        return d.endAngleOfMyArc;
    });

var arcData = [
    {startAngleOfMyArc: 0, endAngleOfMyArc: 0.2},
    {startAngleOfMyArc: 0.2, endAngleOfMyArc: 0.6},
    {startAngleOfMyArc: 0.6, endAngleOfMyArc: 1.4},
    {startAngleOfMyArc: 1.4, endAngleOfMyArc: 3},
    {startAngleOfMyArc: 3, endAngleOfMyArc: 2* Math.PI}
];

// Create a path element and set its d attribute
d3.select('g')
    .selectAll('path')
    .data(arcData)
    .enter()
    .append('path')
    .attr('d', arcGenerator1);

////Arc2/////////

 var arcGenerator2 = d3.arc()
    .innerRadius(20)
    .outerRadius(100)
    .startAngle(function(d) {   
        return d.startAngleOfMyArc;
    })
     .endAngle(function(d) {
        return d.endAngleOfMyArc;
    });

var arcData = [
    {startAngleOfMyArc: 0, endAngleOfMyArc: 0.2},
    {startAngleOfMyArc: 0.2, endAngleOfMyArc: 0.6},
    {startAngleOfMyArc: 0.6, endAngleOfMyArc: 1.4},
    {startAngleOfMyArc: 1.4, endAngleOfMyArc: 3},
    {startAngleOfMyArc: 3, endAngleOfMyArc: 2* Math.PI}
];

// Create a path element and set its d attribute
d3.select('g')
    .selectAll('path')
    .data(arcData)
    .enter()
    .append('path')
    .attr('d', arcGenerator2);
  </script>
</body>
</html>``
...