javascript - D3.js 版本 3 中的 donut 气泡图

Question

我需要绘制气泡图，其中每个气泡都是一个 donut chart ，如下图 d3 版本 3 中所示。我能够取得一些成就，但不明白如何水平分布圆圈，因为我的小部件将是长方形。

此外，如何制作下图中的 donut 气泡。任何帮助，将不胜感激。谢谢。

代码:

let colorCircles = {
  'a': '#59bcf9',
  'b': '#faabab',
  'd': '#ffde85'
};
let tooltip = d3.select("body")
  .append("div")
  .attr("class", "tooltip-inner")
  .style("position", "absolute")
  .style("min-width", "12rem")
  .style("visibility", "hidden")
  .style("color", "#627386")
  .style("padding", "15px")
  .style("stroke", '#b8bfca')
  .style("fill", "none")
  .style("stroke-width", 1)
  .style("background-color", "#fff")
  .style("border-radius", "6px")
  .style("text-align", "center")
  .text("");

let bubble = d3.layout.pack()
  .sort(null)
  .size([width, diameter])
  .padding(15)
  .value(function(d) {
    return d[columnForRadius];
  });

let svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", diameter)
  .attr("class", "bubble");

let nodes = bubble.nodes({
  children: dataset
}).filter(function(d) {
  return !d.children;
});

let circles = svg.selectAll("circle")
  .data(nodes)
  .enter()
  .append("circle")
  .attr("r", function(d) {
    return d.r;
  })
  .attr("cx", function(d) {
    return d.x;
  })
  .attr("cy", function(d) {
    return d.y - 20;
  })

  .style("fill", function(d) {
    return colorCircles[d[columnForColors]]
  })
  .on("mouseover", function(d) {
    tooltip.style("visibility", "visible");
    tooltip.html('<p>' + d[columnForColors] + ": " + d[columnForText] + "</p><div class='font-bold displayInlineBlock'> $" + d[columnForRadius] + '</div>');
  })
  .on("mousemove", function() {
    return tooltip.style("top", (d3.event.offsetY - 10) + "px").style("left", (d3.event.offsetX + 10) + "px");
  })
  // .on("mouseout", function() {
  //     return tooltip.style("visibility", "hidden");
  // })
  .attr("class", "node");

circles.transition()
  .duration(1000)
  .attr("r", function(d) {
    return d.r;
  })
  .each('end', function() {
    display_text();
  });

function display_text() {
  let text = svg
    .selectAll(".text")
    .data(nodes, function(d) {
      return d[columnForText];
    });

  text.enter().append("text")
    .attr("class", "graphText")
    .attr("x", function(d) {
      return d.x;
    })
    .attr("y", function(d) {
      return d.y - 20;
    })
    .attr("dy", ".2em")
    .attr("fill", "white")
    .attr("font-size", function(d) {
      return d.r / 5;
    })
    .attr("text-anchor", "middle")
    .text(function(d) {
      console.log(d)
      return d[columnForText].substring(0, d.r / 3);
    });

  text.enter().append("text")
    .attr("class", "graphText")
    .attr("x", function(d) {
      return d.x;
    })
    .attr("y", function(d) {
      return d.y - 20;
    })
    .attr("dy", "1.3em")
    .style("text-anchor", "middle")
    .text(function(d) {
      return '$' + d[columnForRadius];
    })
    .attr("font-size", function(d) {
      return d.r / 5;
    })
    .attr("fill", "white");
}

function hide_text() {
  let text = svg.selectAll(".text").remove();
}

d3.select(self.frameElement)
  .style("height", diameter + "px");

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

<script type="text/javascript">
  var dataset = [
    { "Name": "Olives",          "Count": 4319, "Category": "d" },
    { "Name": "Tea",             "Count": 4159, "Category": "d" },
    { "Name": "Boiled Potatoes", "Count": 2074, "Category": "a" },
    { "Name": "Milk",            "Count": 1894, "Category": "a" },
    { "Name": "Chicken Salad",   "Count": 1809, "Category": "a" },
    { "Name": "Lettuce Salad",   "Count": 1566, "Category": "a" },
    { "Name": "Lobster Salad",   "Count": 1511, "Category": "a" },
    { "Name": "Chocolate",       "Count": 1489, "Category": "b" }
  ];

  var width = 300, diameter = 300;
  var columnForText = 'Name',
  columnForColors = 'Category', 
  columnForRadius = "Count";
</script>

Answer 1

这是我的 fiddle :http://jsfiddle.net/71s86zL7/

我创建了一个复合气泡饼图，并在饼图中指定了内半径。

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

.attr("d", function(d) {
    arc.innerRadius(d.r+5);
    arc.outerRadius(d.r);
    return arc(d);
})

请让我知道这个问题是否有任何替代解决方案。