Question

我有这个甜甜圈，我想要做的一切都很小，想要制作70px - 70px的尺寸，但不知道如何应用刻度。我还有一个问题，标签“svg”也有很大的措施。总而言之，我想要一个70px - 70px的正方形与甜甜圈。

 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/

svg是460 * 300 ......我需要70px x 70px

边缘可能不会太厚？

Answer 1

你想要缩放，你能不能只调整外半径和内半径？

更新了小提琴：http://jsfiddle.net/reko91/7qoj49br/1/

这里我创建了一些变量：

var donutWidth = 10;
var outerRadius = 70;

并将这些用于半径'：

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

只需根据甜甜圈的大小调整outerRadius，然后根据甜甜圈的宽度调整donutWidth。

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>

Answer 2

只需缩放组元素0.35（70/200，其中200是当前大小）。

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>

d3.js中的尺寸大小甜甜圈

2 个答案: