javascript - d3plus.Geomap 不是构造函数

Question

我正在制作我的第一个 d3plus 图表并尝试在此处复制一个 https://d3plus.org/examples/d3plus-geomap/coordinate-points/

但与 highcharts 不同，关于如何使用图表的解释很少。我目前的代码是：

<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

container()方法在 v2 中已弃用d3plus

相反，您必须使用select("#viz")

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

Answer 2

您必须获得正确版本的库 - 从我的角度来看，这方面的文档缺乏。

这失败了

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>