Question

我想在条形图上绘制气泡。在每个栏上都会有一个泡泡。泡泡将从不同的json文件中生成。你能给我任何建议吗？提前致谢。代码如下。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
font: 10px sans-serif;
}

.axis path,
.axis line {
 fill: none;
 stroke: #000;
 shape-rendering: crispEdges;
 }

 .bar {
 fill: #ccc;
 }

.x.axis path {
 display: none;
 }
.node {
fill: #000;
z-index: 999;
 }

 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>

 var margin = {top: 20, right: 20, bottom: 30, left: 40},
  width = 960 - margin.left - margin.right,
  height = 500 - margin.top - margin.bottom;

 var formatPercent = d3.format(".0%");

 var x = d3.scale.ordinal()
 .rangeRoundBands([0, width], .1);

 var y = d3.scale.linear()
 .range([height, 0]);

 var xAxis = d3.svg.axis()
 .scale(x)
 .orient("bottom");

 var yAxis = d3.svg.axis()
 .scale(y)
 .orient("left")
 .tickFormat(formatPercent);

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


 d3.tsv("data.tsv", type, function(error, data) {
 x.domain(data.map(function(d) { return d.letter; }));
 y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

 svg1.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

 svg1.append("g")
  .attr("class", "y axis")
  .call(yAxis)
 .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Frequency");

  svg1.selectAll(".bar")
  .data(data)
  .enter().append("rect")
  .attr("class", "bar")
  .attr("x", function(d) { return x(d.letter); })
  .attr("width", x.rangeBand())
  .attr("y", function(d) { return y(d.frequency); })
  .attr("height", function(d) { return height - y(d.frequency); })
  .append("bubble")
  .attr("class","bub");

   var diameter = 30,
  format = d3.format(",d"),
  color = d3.scale.category20c();

 var bubble = d3.layout.pack()
.sort(null)
.size([diameter, diameter])
.padding(1.5);

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

d3.json("flare.json", function(error, root) {
var node = svg.selectAll(".node")
  .data(bubble.nodes(classes(root))
  .filter(function(d) { return !d.children; }))
 .enter().append("g")
  .attr("class", "node")
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

  node.append("circle")
  .attr("r", function(d) { return d.r; })
  .style("fill", function(d) { return color(d.packageName); });

  node.append("text")
  .attr("dy", ".3em")
  .style("text-anchor", "middle")
  .text(function(d) { return d.className.substring(0, d.r / 3); });
  });

  // Returns a flattened hierarchy containing all leaf nodes under the root.
   function classes(root) {
   var classes = [];

   function recurse(name, node) {
   if (node.children) node.children.forEach(function(child) { recurse(node.name,                                            child); });
    else classes.push({packageName: name, className: node.name, value: node.size});
    }

 recurse(null, root);
 return {children: classes};
  }

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

 function type(d) {
 d.frequency = +d.frequency;
  return d;
 }

 </script>
 //File for bar chart is below
  data.tsv
letter  frequency
A   .08167
B   .01492
C   .02780
D   .04253

//Json for bubble charts
flare.json
{
 "name": "flare",
 "children": [
      {"name": "Swaraj", "size": 20}
    ]
}

我想在条形图上显示气泡图。

如何在d3.js中的条形图上绘制气泡

0 个答案: