All geek questions in one place

Integrated Pie Chart

I spent a lot of time trying to reproduce the attached diagram in SVG / D3.js. The closest I came is to use the attached code. I explored using the tree function, but I can only create one range of circles.

The problem with the attached code will be very complex to make it look smooth and smart by manually typing in which pixel coordinates each circle should have.

For information, the data set will do nothing more than the color of these circles, so it can be completely static in terms of shape. The code just needs to generate a form, and I can then control the color based on the data set.

image of what I'm trying to create:

enter image description here

This is my code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>D3 Test</title>
  <style type="text/css">

  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
</head>

<body>
  <script type="text/javascript">
    //Width and height
    var w = 1000;
    var h = 1000;
    var dataset = [6, 2, 5, 4, 5, 5, 5, 5, 3, 4, 5, 6];
    var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);
    var circles = svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle");


    circles.attr("cx", function(d, i) {
      var Xaxis;
      if (i === 0) {
        Xaxis = "500";
      } else if (i === 1) {
        Xaxis = "400";
      } else if (i === 2) {
        Xaxis = "420";
      } else if (i === 3) {
        Xaxis = "452.5";
      } else if (i === 4) {
        Xaxis = "485";
      } else if (i === 5) {
        Xaxis = "515";
      } else if (i === 6) {
        Xaxis = "547.5";
      } else if (i === 7) {
        Xaxis = "580";
      } else if (i === 8) {
        Xaxis = "600";
      } else if (i === 9) {
        Xaxis = "600";
      } else if (i === 10) {
        Xaxis = "650";
      } else if (i === 11) {
        Xaxis = "700";
      } else if (i === 12) {
        Xaxis = "750";
      } else if (i === 13) {
        Xaxis = "750";
      } else if (i === 14) {
        Xaxis = "750";
      } else if (i === 15) {
        Xaxis = "750";
      } else if (i === 16) {
        Xaxis = "750";
      }
      return Xaxis;
    })
    circles.attr("cy", function(d, i) {
        var Yaxis;
        if (i === 0) {
          Yaxis = "500";
        } else if (i === 1) {
          Yaxis = "500";
        } else if (i === 2) {
          Yaxis = "535";
        } else if (i === 3) {
          Yaxis = "560";
        } else if (i === 4) {
          Yaxis = "585";
        } else if (i === 5) {
          Yaxis = "585";
        } else if (i === 6) {
          Yaxis = "560";
        } else if (i === 7) {
          Yaxis = "535";
        } else if (i === 8) {
          Yaxis = "500";
        } else if (i === 9) {
          Yaxis = "600";
        } else if (i === 10) {
          Yaxis = "550";
        } else if (i === 11) {
          Yaxis = "500";
        } else if (i === 12) {
          Yaxis = "450";
        } else if (i === 13) {
          Yaxis = "600";
        } else if (i === 14) {
          Yaxis = "550";
        } else if (i === 15) {
          Yaxis = "500";
        } else if (i === 16) {
          Yaxis = "450";
        }
        return Yaxis;
      })
      .attr("r", function(d, i) {
        var size;
        if (i === 0) {
          size = "30";
        } else if (i > 0) {
          size = "20";
        }
        return size;
      })
      .attr("fill", function(d, i) {
        var returnColor;
        if (d === 1) {
          returnColor = "green";
        } else if (d === 2) {
          returnColor = "lightgreen";
        } else if (d === 3) {
          returnColor = "gold";
        } else if (d === 4) {
          returnColor = "darkorange";
        } else if (d === 5) {
          returnColor = "red";
        } else if (d === 6) {
          returnColor = "lightgrey";
        }
        return returnColor;
      });
  </script>

</body>

</html>
Run codeHide result
+4
2

. , :

x:

x-center + ( * sin ())

y:

y-center + ( * cos ())

distance - , angle - . , :

rad = deg * Math.PI/180;

. d3.range() , . :

var width = height = 500;
var svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var color = d3.scaleOrdinal(d3.schemeCategory10)
  .domain(d3.range(16));

var data1 = d3.range(16);
var dataRadius = [70, 110, 150, 190, 230];

svg.append("circle").attr("cx", width / 2)
  .attr("cy", height / 2)
  .attr("r", 20)
  .attr("fill", "yellow");

var groups = svg.selectAll(".groups")
  .data(dataRadius)
  .enter()
  .append("g");

var circles = groups.selectAll(".circles")
  .data(data1)
  .enter()
  .append("circle");

circles.attr("cx", function(d, i) {
    var radius = this.parentNode.__data__;
    return width / 2 + (radius * Math.sin(i * (360 / (data1.length) * Math.PI / 180)))
  })
  .attr("cy", function(d, i) {
    var radius = this.parentNode.__data__;
    return height / 2 + (radius * Math.cos(i * (360 / (data1.length) * Math.PI / 180)))
  })
  .attr("r", function() {
    return this.parentNode.__data__ == 230 ? 24 : 14
  })
  .attr("fill", function(d, i) {
    return i == 13 || i == 14 ? color(i - 2) : "#ccc"
  });
<script src="https://d3js.org/d3.v4.min.js"></script>
Hide result
+7

, , , . SVG, transform. , , . "SVG- - ?" . , , , , , , .

, , , , SVG- .

, , , SVG-. , :

<circle cx="314.67156727579004" cy="276.78784026555627"></circle>

:

<g transform="rotate(30)">
  <circle transform="translate(70)"></circle>
</g>

, (r, fill) , . , :

  • 30 .
  • 70 x.
  • .

cx cy, 0, , , . SVG :

enter image description here

:

const svg = d3.select("svg>g");

const g = svg.selectAll(null)
  .data(d3.range(30, 361, 30))
  .enter().append("g")
    .attr("transform", d => `rotate(${d})`);
    
g.selectAll(null)
  .data(d3.range(40, 171, 30))
  .enter().append("circle")
    .attr("transform", d => `translate(${d})`)
    .attr("r", (d, i) => i === 4 ? 15 : 10)
    .attr("fill", "#ccc");
  
<script src="https://d3js.org/d3.v4.js"></script>
<svg width="600" height="600">
  <g transform="translate(200,200)">
  </g>
</svg>
Hide result
+1

Source: https://habr.com/ru/post/1658917/

More articles:


All Articles