个人中心
gpt4 book ai didi

javascript - d3.js Checking/Count 系列图表

转载 作者：可可西里 更新时间：2023-11-01 02:12:33 25 4
gpt4 key购买 nike

我正在开发一个使用四方数据的应用程序。 enter image description here

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

所以我们有一批数据 - 健康与美容、餐厅、咖啡馆、公共(public)场所。-- 会有 COUNT 个 -- 以及结帐信息的总和。所以我希望这张图表能够显示 field 的数量，但也能表明它们有多受欢迎……例如，酒吧的数量可能会更少，但签到的数量会更高，因为它们更受欢迎。所以在那种情况下想要反转圆圈的颜色。

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

  • 圆圈/圆圈间距的交换导致黑色路径撕裂和奇怪的行为
  • 对于线条，我希望在蓝色圆圈下方有一条黑线，但在蓝色圆圈内部显示一条裁剪的圆圈路径橙色线——这是一种掩蔽能力。

_latest jsfiddle

phase1

用“V”代替“L”，但暂时无法正常工作。

第 2 阶段 我认为它的工作更加一致，但存在一些问题。另外，我不确定圆圈的数据和缩放比例。 (我添加了额外的标签，以便可以看到圆圈的值是什么)

phase 3

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

所以这里第一步首先按大小顺序绘制圆圈...所以在这种情况下按计数..但这里可能存在错误，反转颜色以指示 checkin 计数 - 所以也许我们需要排序计数，检查顺序 - 这样第一个被绘制的圆圈就会正确跟随。

  // 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
}]

最佳答案

我不确定我明白你的问题是什么，但我决定尝试根据你的截图和你的 plunker 的示例数据创建该图表。这是我的结果: enter image description here

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

<!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>

关于javascript - d3.js Checking/Count 系列图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39306307/

25 4 0
文章推荐： javascript - QByteArray 通过 QWebChannel 在 Javascript 中被视为字符串
文章推荐： java - 在程序运行时获取方法参数的值
文章推荐： java - 试图让 Spring SecurityConfig 与 Spring MVC 和 JavaConfig 一起工作
文章推荐： ios - Swift - 无法更新 UITabBar barTintColor
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com