CODEWITHSUNDEEP
javascriptjqueryd3.jssvg
yavg
yavg

Reputation: 3051

scale size donut in d3.js

I have this donut, and I want to make everything small, want to make a size of 70px - 70px, but do not know how to apply a scale. I have also the problem that the label "svg" also has great measures. altogether I want to have a square of 70px - 70px with the donut.

enter image description here

 var dataset = {
       datos: [(50), (50)],
  };

  var width = 460,
    height = 300,
    radius = Math.min(width, height) / 2;

  var color = d3.scale.ordinal()
   .range(["#38C956", "#000000"]);


  var pie = d3.layout.pie()
    .sort(null);

  var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

  var svg = d3.select("#donut").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")


  var path = svg.selectAll("path")
    .data(pie(dataset.datos))
    .enter().append("path")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc);

http://jsfiddle.net/o11ce/7qoj49br/

the svg is 460 * 300 ... i need 70px x 70px enter image description here

it would be possible that the edge is not too thick?

Upvotes: 1

Views: 772

Answers (2)

thatOneGuy
thatOneGuy

Reputation: 10612

You want to scale, can you not just adjust the outer and inner radius ?

Updated fiddle : http://jsfiddle.net/reko91/7qoj49br/1/

Here I have created some variables : 

var donutWidth = 10;
var outerRadius = 70;

And used these for both radius':

var arc = d3.svg.arc()
  .innerRadius(outerRadius - donutWidth)
  .outerRadius(outerRadius);

Just adjust the outerRadius for the size of the donut, and the donutWidth for the width of the donut.

var dataset = {
     datos: [(50), (50)],
};

var width = 460,
  height = 300,
  radius = Math.min(width, height) / 2;
var donutWidth = 10;
var outerRadius = 70;

var color = d3.scale.ordinal()
 .range(["#38C956", "#000000"]);


var pie = d3.layout.pie()
  .sort(null);

var arc = d3.svg.arc()
  .innerRadius(outerRadius - donutWidth)
  .outerRadius(outerRadius);

var svg = d3.select("#donut").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
  

var path = svg.selectAll("path")
  .data(pie(dataset.datos))
  .enter().append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<body>
<div id='donut'>
</div>
</body>

Upvotes: 1

Gilsha
Gilsha

Reputation: 14591

Just scale the group element 0.35 (70/200 where 200 is the current size).

var svg = d3.select("#donut").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") scale(0.35)")


var dataset = {
  datos: [(50), (50)],
};

var width = 460,
  height = 300,
  radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
  .range(["#38C956", "#000000"]);


var pie = d3.layout.pie()
  .sort(null);

var arc = d3.svg.arc()
  .innerRadius(radius - 100)
  .outerRadius(radius - 50);

var svg = d3.select("#donut").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ") scale(0.35)")


var path = svg.selectAll("path")
  .data(pie(dataset.datos))
  .enter().append("path")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
  <div id='donut'>
  </div>
</body>

Upvotes: 0

Related Questions