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

container()方法在v2 of 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>

​