d3plus.Geomap не является конструктором

Question

Я делаю свой первый график d3plus и пытаюсь скопировать его сюда https://d3plus.org/examples/d3plus-geomap/coordinate-points/

Но в отличие от старших графиков, объяснение того, как использовать график, очень мало.Мой текущий код:

<script src="./d3plus.full.min.js"></script>

<div id="viz"> </div>

<script>

new d3plus.Geomap()
  .container("#viz")
  .data("https://d3plus.org/data/city_coords.json")
  .groupBy("slug")
  .colorScale("dma_code")
  .colorScaleConfig({
    color: ["red", "orange", "yellow", "green", "blue"]
  })
  .label(function(d) {
    return d.city + ", " + d.region;
  })
  .point(function(d) {
    return [d.longitude, d.latitude];
  })
  .render();


  </script>

---

, и я получаю ошибку: d3plus.Geomap не является конструктором.Может, кто-нибудь скажет мне мою ошибку или укажет на базовые примеры d3plus

Answer 1

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

ЭТО ОШИБКИ

new d3plus.Geomap()

  .data("https://d3plus.org/data/city_coords.json")
  .groupBy("slug")
  .colorScale("dma_code")
  .colorScaleConfig({
color: ["red", "orange", "yellow", "green", "blue"]
  })
  .label(function(d) {
return d.city + ", " + d.region;
  })
  .point(function(d) {
return [d.longitude, d.latitude];
  })
  .render();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3plus/1.9.8/d3plus.full.min.js"></script>

<div id="viz"> </div>

ЭТО РАБОТАЕТ

new d3plus.Geomap()
  .data("https://d3plus.org/data/city_coords.json")
  .groupBy("slug")
  .colorScale("dma_code")
  .colorScaleConfig({
color: ["red", "orange", "yellow", "green", "blue"]
  })
  .label(function(d) {
return d.city + ", " + d.region;
  })
  .point(function(d) {
return [d.longitude, d.latitude];
  })
  .render();

<script src="https://d3plus.org/js/d3plus-geomap.v0.6.full.min.js"></script>
<div id="viz"> </div>

Answer 2

container() метод устарел в v2 из d3plus

Вместо этого вы должны использовать select("#viz")

Jsfiddle: https://jsfiddle.net/1ctkujr2/