D3.js Диаграмма проверки/подсчета

Я работаю над приложением, которое использует данные четырех измерений. введите описание изображения здесь

//это сериальная диаграмма, в которой было какое-то вникание, - но есть некоторые ошибки, которые все еще существуют здесь.

Итак, у нас есть пакет данных - здоровье и красота, рестораны, кафе, общественные здания. - у них будет СЧЕТ - и ПОДТВЕРЖДЕНИЕ информации о выписке. Поэтому я хочу, чтобы эта диаграмма могла показать NUMBER мест, но также указать, насколько они ПОПУЛЯРНЫ. Так, например, количество пабов может быть меньше, но количество проверок выше, поскольку они более популярны. Поэтому в этом случае хотите изменить цвета кругов.

Есть некоторые ошибки с текущими попытками кода.

  • замена окружности/окружности приводит к разрыву в черных дорожках и нечетном поведении
  • с линиями, которые я хотел бы иметь черную линию под голубым кружком, но внутри синего круга показана обрезанная линия оранжевого цвета линии - это своего рода маскирующая способность.

_ last jsfiddle

phase1

используя "V" вместо "L", но пока не смог заставить его работать должным образом.

фаза 2Я думаю, что он работает более последовательно, но есть некоторые проблемы. Кроме того, я не уверен в данных и масштабировании кругов. (Я добавил дополнительные метки, чтобы было видно, каково значение кругов)

фаза 3

немного изменил getCircleSize, хотя я считаю, что более последовательная вещь должна была бы выглядеть примерно так: layerSet.push(parseInt(getPercentage(layerArray[i], meansPerGroup[0])*60, 10));

так что здесь первый шаг сначала рисует круги по порядку размера... так что в этом случае по счету.. но, возможно, здесь возникает ошибка, изменяющая цвет, чтобы вместо этого указывать счетчик проверок - так что, возможно, нам нужно отсортировать count, checkin order - таким образом, первый круг, который нужно нарисовать, следует правильно.

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

ОТВЕТЫ