5

嘿，我正在使用 D3JS 作为图表库，我对利用气泡图中的酷特性非常感兴趣。在D3JS主图表站点上，使用以下气泡图比较两组数据：

在此处输入图像描述

气泡图。

我想知道是否有人真的知道如何创建这样的气泡图，我正在努力让它过去使用大小变量。

我只是真的希望能够比较两组数据，例如：

主机名 (45,955,158) VS 活动站点 (21,335,629)

我正在使用的代码如下，我使用 JSON 来检索我的数据，我是 js 的主要新手，甚至更多，所以这个 jQuery 库非常感谢任何帮助。

索引.html

<div class="four columns browserstats2003">
            <h3>Browser Stats 2003</h3>

        </div>        
    <div class="four columns mobilephonestats">
       <h3>Smartphone Sales 2003</h3>
       <p>The first smartphone had not been released in 2003.</p>
               <div id=""></div>


    </div>

移动.json

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "Smartphone Sales", "size": 11111},
  {"name": "Smartphone Salesa", "size": 2111}
     ]
    }
   ]
  }
 ]
}

js/js.js // JavaScript 文档

$(document).ready(function () {

        //  2003 bubble chart
            var diameter = 360,
                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(".mobilephonestats").append("svg")
                .attr("width", diameter)
                .attr("height", diameter)
                .attr("class", "bubble");

            d3.json("mobile.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("title")
                  .text(function(d) { return d.className + ": " + format(d.value); });

              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");

// end bubble year 

        });
4

1 回答 1

5

在您提供的示例中，他肯定使用了力布局，这比您使用的气泡图要复杂一些。您必须考虑碰撞和动画等问题。

为什么不看看他用来生成它的 JavaScript 。

Jim Vallandingham 写了一篇关于Bubble Clouds的详尽教程，应该可以帮助您入门。

为了在圆圈中间创建分割以进行某种形式的数据比较，“剪辑路径”是前进的方向：

  • 附加两个圆圈，每个数据集一个。
  • 附加两个剪辑路径，每个数据集一个
  • 为每个剪辑路径附加一个矩形。
  • 设置矩形x属性和宽度，定义了中间分割的位置。这必须是数据的函数。
  • 裁剪矩形和圆形

这是代码：

var nodeEnter = node.enter().append("a")
      .attr("class", "g-node")
      .call(force.drag);

  var democratEnter = nodeEnter.append("g")
      .attr("class", "g-democrat");

  democratEnter.append("clipPath") // clip-path to crop the rectangle
      .attr("id", function(d) { return "g-clip-democrat-" + d.id; })
    .append("rect");

  democratEnter.append("circle");

  var republicanEnter = nodeEnter.append("g")
      .attr("class", "g-republican");

  republicanEnter.append("clipPath") // Clip-path to crop the rectangle
     .attr("id", function(d) { return "g-clip-republican-" + d.id; })
     .append("rect");

  republicanEnter.append("circle");

  node.selectAll("rect")
      .attr("y", function(d) { return -d.r - clipPadding; })
      .attr("height", function(d) { return 2 * d.r + 2 * clipPadding; });

  // Defining the x-attr and width of the rectangle, which effectively splits the circle
  node.select(".g-democrat rect")
      .attr("x", function(d) { return -d.r - clipPadding; }) 
      .attr("width", function(d) { return 2 * d.r * d.k + clipPadding; });

  node.select(".g-republican rect")
      .attr("x", function(d) { return -d.r + 2 * d.r * d.k; })
      .attr("width", function(d) { return 2 * d.r; });

  // Setting the clip-path to crop the circles
  node.select(".g-democrat circle")
      .attr("clip-path", function(d) { return d.k < 1 ? "url(#g-clip-democrat-" + d.id + ")" : null; });

  node.select(".g-republican circle")
      .attr("clip-path", function(d) { return d.k > 0 ? "url(#g-clip-republican-" + d.id + ")" : null; });

这应该生成如下内容：

<g class="g-democrat">
    <clipPath id="g-clip-democrat-43">
        <rect y="-63.36487389363757" height="126.72974778727514" x="-63.36487389363757" width="59.449375597303515">
        </rect>
    </clipPath>
    <circle clip-path="url(#g-clip-democrat-43)" r="59.36487389363757">
</circle></g>
<g class="g-republican">
    <clipPath id="g-clip-republican-43">
        <rect y="-63.36487389363757" height="126.72974778727514" x="-3.915498296334057" width="118.72974778727514">
        </rect>
    </clipPath>
    <circle clip-path="url(#g-clip-republican-43)" r="59.36487389363757">
</circle></g>
于 2014-08-08T17:38:36.993 回答