Question

我正在创建多个饼图。每个饼图都位于一个div中。我的所有饼图都是彼此相邻渲染的。我想在它们之间留出一些间距，这样看起来更好，传奇可以适当地适应。

我尝试增加图表的宽度，这没有帮助。我也尝试为div分配宽度。那也行不通。

建议？

Answer 1

如果你想要图表之间的空间只是放在边缘。

var margin = {
    top: 20,
    right: 20,
    bottom: 90,
    left: 50
  },
  width = 960 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

接下来创建带有这些边距的svg，

 var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

然后将一个组附加到将包含饼图的svg。将组翻译成距离margin.left并将其翻译一段距离margin.top，就像这样，

  var pie = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

请注意，坐标系的原点在左上方，而y轴则为正向下增加。

<!DOCTYPE html>
<meta charset="utf-8">

<body>
  <div id="pie">
  </div>
  <h3>JSON data:</h3>
  <div>
    <pre id="json"></pre>
  </div>
  <!-- load the d3.js library -->
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>
    var data = [{
        "name": "RT",
        "category": "M50",
        "value": 1
      },
      {
        "name": "K M",
        "category": "M50",
        "value": 2
      },
      {
        "name": "SD",
        "category": "M60",
        "value": 3
      },
      {
        "name": "DK",
        "category": "M50",
        "value": 4
      },
      {
        "name": "BD",
        "category": "M40",
        "value": 5
      },
      {
        "name": "KC",
        "category": "M40",
        "value": 6
      },
      {
        "name": "PM",
        "category": "M40",
        "value": 7
      },
      {
        "name": "NR",
        "category": "M50",
        "value": 8
      },
      {
        "name": "LM",
        "category": "M50",
        "value": 9
      },
      {
        "name": "SL",
        "category": "M60",
        "value": 1
      }
    ]

    // To display json in html page
    document.getElementById("json").innerHTML = JSON.stringify(data, undefined, 2);
    // ****************** - START PIE Chart - ****************

    var margin = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
      },
      radius = 100,
      width = margin.left + margin.right + (2 * radius),
      height = margin.top + margin.bottom + (2 * radius);

    var color = ["#2C93E8", "#838690", "#F56C4E", "#A60F2B", "#648C85", "#B3F2C9", "#528C18", "#C3F25C"];

    // Generate an array object on categories as a category
    var category_count = d3.nest()
      .key(function(d) {
        return d.category;
      })
      .rollup(function(leaves) {
        return leaves.length;
      })
      .entries(data);

    // console.log("category_count");
    // category_count.forEach(function(element) {
    //   console.log(element)
    // });

    var category_arcs = d3.pie()
      .value(function(d) {
        return d.value;
      })
      (category_count);

    // console.log("category_arcs");
    // category_arcs.forEach(function(element) {
    //   console.log(element);
    // })

    var pie = d3.pie()
      .value(function(d) {
        return d.category;
      })(category_arcs);

    var arc = d3.arc()
      .outerRadius(radius - 10)
      .innerRadius(0);

    var labelArc = d3.arc()
      .outerRadius(radius - 10)
      .innerRadius(radius - 100);

    var svg = d3.select("#pie")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")"); //center of pie

    var g = svg.selectAll("arc")
      .data(category_arcs)
      .enter().append("g")
      .attr("class", "arc");

    g.append("path")
      .attr("d", arc)
      .style("fill", function(d, i) {
        return color[i];
      });

    g.append("text")
      .attr("transform", function(d) {
        return "translate(" + labelArc.centroid(d) + ")";
      })
      .text(function(d) {
        return d.data.key + " = " + d.value;
      })
      .style("text-anchor", "middle")
      .style("font-size", "10px")
      .style("fill", "white");

    svg.append("text")
      .attr("transform", "translate(0," + (0 - radius) + ")")
      .text("Count occurences of each category")
      .style("text-anchor", "middle")
      .style("fill", "black");

    // ****************** - END PIE Chart - ****************

    // ****************** - START SECOND PIE Chart - *******

    var category_sum = d3.nest().key(function(d) {
        return d.category;
      })
      .rollup(function(leaves) {
        return d3.sum(leaves, function(d) {
          return d.value;
        });
      }).entries(data)
      .map(function(d) {
        return {
          Category: d.key,
          totalValue: d.value
        };
      });

    var category_sum_arcs = d3.pie()
      .value(function(d) {
        return d.totalValue;
      })
      (category_sum);

    var arcSum = d3.arc()
      .outerRadius(radius - 10)
      .innerRadius(0);

    var labelArc = d3.arc()
      .outerRadius(radius - 40)
      .innerRadius(radius - 50);

    var svg = d3.select("#pie")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")"); // Moving the center point. 1/2 the width and 1/2 the height

    var g = svg.selectAll("arc")
      .data(category_sum_arcs)
      .enter().append("g")
      .attr("class", "arc");

    g.append("path")
      .attr("d", arcSum)
      .style("fill", function(d, i) {
        return color[i];
      });

    // console.log("category_sum_arcs");
    // category_sum_arcs.forEach(function(element) {
    //   console.log(element);
    // })

    g.append("text")
      .attr("transform", function(d) {
        return "translate(" + labelArc.centroid(d) + ")";
      })
      .text(function(d) {
        // console.log(d.key);
        return d.data.Category + " = " + d.value;
      })
      .style("text-anchor", "middle")
      .style("font-size", "10px")
      .style("fill", "white");

    svg.append("text")
      .attr("transform", "translate(0," + (0 - radius) + ")")
      .style("text-anchor", "middle")
      .text("Sum value of each category")
      .style("fill", "black");

    // ****************** - END SECOND PIE Chart - *******
  </script>
</body>

DC.js使图表容器或div更宽，以正确显示图例

1 个答案: