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() 方法在 d3plus

的 v2 中已弃用

相反，您必须使用 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>

d3plus.Geomap 不是构造函数

d3plus.Geomap is not a constructor

javascript

d3.js

d3plus