首页 > 编程语言> 文章详细

javascript-堆积的D3JS气泡图

2019-11-22 11:37:51 阅读：946 来源： 互联网

标签：d3-js circle-pack json javascript

嘿,我将D3JS用作图表库,我真的很想利用Bubble Chart中的炫酷功能.在主要的D3JS图表站点上,以下气泡图用于比较两组数据：

Bubble Chart.

我想知道是否有人对如何创建这样的气泡图有任何想法,我正在努力使用大小变量使它过去.

我只是真的想能够比较两组数据,例如：

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

我正在使用的代码如下,我使用JSON检索数据,涉及js时我是一个主要的新手,因此,这个jQuery库非常感谢您的帮助.

index.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>

mobile.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 

        });

解决方法:

在example you provided中,他肯定使用了力的布局,这比您使用的气泡图要复杂一些.您必须考虑诸如碰撞和动画之类的事情.

为什么不看看the JavaScript he used来生成它呢？

Jim Vallandingham在Bubble Clouds上写了一篇详尽的教程,这应该使您入门.

为了在cirlce的中间创建拆分,作为进行某种形式的数据比较的一种方式,“剪切路径”是前进的方法：

>附加两个圆圈,每个数据集一个.
>附加两个剪切路径,每个数据集一个
>将矩形附加到每个剪切路径.
>设置矩形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>

标签：d3-js,circle-pack,json,javascript
来源： https://codeday.me/bug/20191122/2059340.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-堆积的D3JS气泡图