Question

我一直在尝试使用来自Google Analytics（分析）的一些信息来制作小部件。我得到了实时访问者，然后在d3.js的帮助下将它们显示在带有标志的气泡中。我确实设法将它们显示在屏幕上，并且力模拟工作正常。但是我似乎无法掌握如何根据各自的国家/地区对气泡进行聚类，因为我不知道哪些国家/地区会提前显示，而且我不擅长网络编程，因此无法即时进行编程链接并使用forceLink。也许有一种更好的方式让我丢失了？我将不胜感激您可以给我的任何指点。

(function() {
  var width = 500;
  height = 500;

  var svg = d3.select("#chart")
    .append("svg")
    .attr("height", height)
    .attr("width", width)
    .append("g")
    .attr("transform", "translate(0,0)")



  // SO question preparation :
  var data_csv = "Country,Count\nUkraine,1\nDenmark,1\nDenmark,1";



  data = d3.csvParse(data_csv);

  d3.queue().await(ready, data);


  var forceX = d3.forceX(function(d) {
    return width / 2
  }).strength(0.05)



  var forceY = d3.forceY(function(d) {
    return height / 2
  }).strength(0.05)


  var simulation = d3.forceSimulation()
    .force("xTowardsTheCenter", forceX)
    .force("yTowardsTheCenter", forceY)
    .force("antiColliding", d3.forceCollide(function(d) {
      return radiusScale(d.Count) + 1;
    }))
    .force("charge", d3.forceManyBody().strength(-15))


  // this function sets up a variation scale so that the circles can have different sizes without
  // occupying all of the screen

  var radiusScale = d3.scaleSqrt().domain([1, 40]).range([30, 130]);



  function ready(error, datapoints) {

    var circles = svg.selectAll(".Country")
      .data(datapoints)
      .enter().append("circle")
      .attr("id", function(d) {
        return d.Country;
      })
      .attr("class", "country")
      .attr("r", function(d) {
        return radiusScale(d.Count);
      })
      .attr("text", function(d) {
        return d.Count;
      })
      .style("stroke", "black")
      .style("fill", "blue")



    simulation.nodes(datapoints)
      .on('tick', ticked)

    function ticked() {
      circles
        .attr("cx", function(d) {
          return d.x
        })
        .attr("cy", function(d) {
          return d.y
        })
    }


})();

<!DOCTYPE html>
<html>
    <title>Neets visitors </title>
        <b>Neets visitors</b>
        <body>
            <div id="chart"></div>
            <script src="https://d3js.org/d3.v4.js"></script>
            <script src="bubble.js"></script>
        </body>
</html>

Expected result

在d3.js中聚集气泡

0 个答案: