javascript - d3 连接的串联圆

Question

我正在尝试创建一个应用程序，其中圆圈彼此接触边缘。

我在尝试计算 cx 函数时遇到问题。

.attr("cx", function(d, i) {
  return (i * 50) + 50; //Math.sqrt(d) ;// + 50; 
})

http://jsfiddle.net/59bunh8u/56/

  var el = $('.serieschart');
  var w = el.data("width");
  var h = el.data("height");


  var margin = {
    top: 65,
    right: 90,
    bottom: 5,
    left: 150
  };

  var svg = d3.select(el[0]).append("svg")
    .attr("class", "series")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.selectAll("circle")
    .data([400, 100, 1000, 300])
    .enter().append("circle")
    .attr("cy", 60)
    .attr("cx", function(d, i) {
      return (i * 50) + 50; //Math.sqrt(d) ;// + 50; 
    })
    .attr("fill", function(d, i) {
      return "#00ccff";
    })
    .attr("r", function(d) {
      return Math.sqrt(d);
    });

Answer 1

这里我使用“计数器”来添加值...

var counter = 0;

...并将数据分配给变量...

var data = [400, 100, 1000, 300];

...为了更好地访问不同的索引。

然后，对于每个圆形元素，我们设置 cx 属性:

.attr("cx", function(d, i) {
    return i ? (counter += Math.sqrt(data[i - 1]) + Math.sqrt(data[i])) : counter;
})

我放置三元运算符是因为，当然，第一个循环没有data[i - 1]。因此，这是数学解释:

• 对于第一个圆:返回 counter(或 i)，为零。
• 从第二个圆开始:添加该圆的半径 (Math.sqrt(data[i])) 和最后一个圆的半径 (Math.sqrt(data[i - 1) ])) 到 counter，并返回 counter。

这是演示:

$(document).ready(function() {


  var rawData = [{
    "name": "Twitter",
    "items": [{
        "label": "15 billion",
        "unit": "per day",
        "value": 5500
      }
      /*,
      				{
      					"label" : "450 checkins",
      					"unit" : "per day",
      					"value" : 400
      				}*/
    ]
  }, {
    "name": "Facebook",
    "items": [{
        "label": "5 billion",
        "unit": "per day",
        "value": 3000
      }
      /*,
      				{
      					"label" : "2000 checkins",
      					"unit" : "per day",
      					"value" : 1500
      				}*/
    ]
  }, {
    "name": "Ebay",
    "items": [{
        "label": "7 billion",
        "unit": "per day",
        "value": 300
      }
      /*,
      				{
      					"label" : "300 checkins",
      					"unit" : "per day",
      					"value" : 500
      				}*/
    ]
  }];


  var el = $('.serieschart');
  var w = el.data("width");
  var h = el.data("height");


  var margin = {
    top: 65,
    right: 90,
    bottom: 5,
    left: 150
  };

  var counter = 0;

  var svg = d3.select(el[0]).append("svg")
    .attr("class", "series")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var data = [400, 100, 1000, 300];

  svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("cy", 60)
    .attr("stroke", "black")
    .attr("cx", function(d, i) {
      return i ? (counter += Math.sqrt(data[i - 1]) + Math.sqrt(data[i])) : counter;
    })
    .attr("fill", function(d, i) {
      return "#00ccff";
    })
    .attr("r", function(d) {
      return Math.sqrt(d);
    });




});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="holder">
  <div class="serieschart" data-role="serieschart" data-width=450 data-height=180></div>
</div>