Question

我正在开发一个使用foursquare数据的应用程序。

//这是一个深入研究的系列图表 - 但是这里仍然存在一些错误。

所以我们有一批数据 - Health＆amp;美容，餐厅，咖啡厅，公共房屋。 - 会有COUNT个 - 以及结帐信息的摘要。所以我希望这个图表能够显示场地的数量，但也表明它们是多么流行......所以例如酒吧的数量可能会更小，但是因为它们更受欢迎，所以签到的数量更多。所以在那种情况下想要反转圆圈的颜色。

目前的代码尝试存在一些错误。

圆圈/圆圈间距的交换会导致黑色路径中的撕裂和奇怪的行为
我希望在蓝色圆圈下面有一条黑线，但是在蓝色圆圈内部显示一条裁剪的圆形路径橙色线 - 这是一种遮蔽能力。

_latest jsfiddle

phase1

使用＆＃34; V＆＃34;而不是＆＃34; L＆＃34;但暂时无法使其正常工作。

第2阶段 我认为它的工作更加一致但存在一些问题。此外，我不确定圆圈的数据和缩放。（我已经添加了额外的标签，以便可以看到圆圈的价值）

phase 3

稍微更改了getCircleSize，尽管我认为更一致的事情是这样的layerSet.push(parseInt(getPercentage(layerArray[i], meansPerGroup[0])*60, 10));

所以这里第一步首先按大小顺序绘制圆圈...所以在这种情况下按计数..但也许有一个错误在这里反转颜色来表示签到计数 - 所以也许我们需要排序计数，签入顺序 - 这样第一个要绘制的圆圈就是正确的。

  // Create Circles
  function setCircles(items) {
    // sort elements in order to draw them by size
    items.sort(function(a, b) {
      return parseFloat(b.value) - parseFloat(a.value);
    });

    var circlelayer = svg.append("g")
      .attr("class", "circlelayer");

    var circle = circlelayer.selectAll("circle")
      .data(items);

    circle.enter().append("circle")
      .attr("class", function(d, i) {
        if (d.l == 0) {
          return "blue";
        }
        return "gold";
      })
      .attr("cy", 60)
      .attr("cx", function(d, i) {
        var distance = calculateDistance(d, items);
        if (d.l == 1) {
          distancesL1.push(distance);
        } else {
          distancesL0.push(distance);
        }
        return distance;
      })
      .attr("r", function(d, i) {
        return Math.sqrt(d.value);
      })
      .attr("filter", function(d) {
        return "url(#drop-shadow)";
      });

    circle.exit().remove();
  }

json结构看起来像这样

[{
    "label": "Health and Beauty",
    "count": 30,
    "checkin": 100
}, {
    "label": "Restaurants",
    "count": 23,
    "checkin": 200
}, {
    "label": "Cafes",
    "count": 11,
    "checkin": 900
}, {
    "label": "Public Houses",
    "count": 5,
    "checkin": 1000
}]

Answer 1

我不确定我明白你的问题是什么，但我决定尝试使用你的plunker的样本数据从你的截图创建该图表。这是我的结果：

我的脚本确保较小的圆圈始终位于愤怒之上，因此两个圆圈始终可见。在这里你可以找到我的代码：

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    html {
      font-family: sans-serif;
    }
  </style>
</head>

<body>
  <div id="container">

  </div>

  <script>
    const data = [{
      "name": "Twitter",
      "vists": "15 billion",
      "unit": "per day",
      "layer1value": 15000000,
      "layer2value": 450
    }, {
      "name": "Facebook",
      "vists": "5 billion",
      "unit": "per day",
      "layer1value": 4000000,
      "layer2value": 5000000
    }, {
      "name": "Google",
      "vists": "5 billion",
      "unit": "per day",
      "layer1value": 5000000,
      "layer2value": 25000
    }, {
      "name": "Netflix",
      "vists": "10 billion",
      "unit": "per day",
      "layer1value": 3000000,
      "layer2value": 2200
    }, {
      "name": "Ebay",
      "vists": "8 billion",
      "unit": "per day",
      "layer1value": 2500000,
      "layer2value": 4900000
    }, {
      "name": "Klout",
      "vists": "2 billion",
      "unit": "per day",
      "layer1value": 1000000,
      "layer2value": 45
    }];

    /*
     * Finding max and min layer size
     */
    const values = data.reduce((acumulator, datum) => [...acumulator, datum.layer1value, datum.layer2value], []);
    const maxValue = Math.max(...values);
    const minValue = Math.min(...values);

    /*
     * Creating scale based on the smallest and largest layer1value or layer2value
     */
    const radiusScale = d3.scaleLinear()
      .domain([minValue, maxValue])
      .range([10, 150]); // min and max value of the circle

    const width = 900;
    const height = 500;
    const orangeColour = '#ffb000';
    const blueColour = '#00a1ff';

    // Creating svg element
    const svg = d3.select('#container').append('svg').attr('width', width).attr('height', height);

    let xPos = 0; // position of circle
    /*
     * iterate over each datum and render all associated elements: two circles, and two labels with pointer lines
     */
    for (let i = 0; i < data.length; i++) {
      const d = data[i]; // current data point
      const currMaxRadius = radiusScale(Math.max(d.layer1value, d.layer2value)); // get largest radius within current group of two layers
      xPos += currMaxRadius; // add that radius to xPos

      // create group element containing all view elements for current datum
      const group = svg.append('g')
        .attr('transform', `translate(${xPos}, ${height / 2})`);

      group.append('circle')
        .attr('r', radiusScale(d.layer1value))
        .style('fill', blueColour);
      group.insert('circle', d.layer2value > d.layer1value ? ':first-child' : null) // if layer2value is larger than layer1value then insert this circle before the previous one
        .attr('r', radiusScale(d.layer2value))
        .style('fill', orangeColour);
      xPos += currMaxRadius * 0.9;

      /*
       * ADDING LABEL UNDERNEATH THE CIRCLES
       */
      group.append('text')
        .text(d.name)
        .attr('dy', radiusScale(maxValue) + 40) // add 40px of padding so label is not just bellow the circle
        .style('text-anchor', 'middle');

      group.append('line')
        .attr('y1', radiusScale(d.layer2value))
        .attr('y2', radiusScale(maxValue) + 20) // add 20px of padding so the pointer line is not overlapping with label
        .style('stroke', orangeColour);


      /*
       * ADDING LABEL AT THE ANGLE OF 45deg RELATIVE TO THE CIRCLES
       */
      // we are creating new group element so we can easily rotate both line and label by -45deg
      const rotatedLabelGroup = group.append('g').style('transform', 'rotate(-45deg)');
      rotatedLabelGroup.append('line')
        .attr('x1', radiusScale(d.layer2value))
        .attr('x2', radiusScale(maxValue) + 20)
        .style('stroke', orangeColour);
      rotatedLabelGroup.append('text')
        .text(d.vists)
        .attr('dx', radiusScale(maxValue))
        .attr('dy', -5); // this way label is slightly above the line
    }
  </script>
</body>

d3.js检查/计算系列图表

1 个答案: