Javascript 无法获得缩放/平移和显示在印度地图上的州名称-D3？

我是D3.js的新手。然而，在练习了站点的示例之后，我试图继续使用John Coogan先生给出的地图。我在他的网站上找到的输出如下

但是，当我试图通过将他的.js、css、.json和index.html放在plunker中来做同样的事情时，它就来了

问题

a） 没有显示任何状态

b） 缩放和平移不起作用

换句话说，此时此刻，我只希望印度地图能与库根先生所展示的例子完全相同。

---

为此需要做些什么

以下是工作原理：

您需要取消对此行的注释：

.call(d3.behavior.zoom().on("zoom", redraw))

在plunk中index.html的第40行，然后进行缩放和平移

状态颜色（基于财富）由于各种更复杂的错误而未显示。控制台中显示的错误（

svg未定义

参考第78行）只是开始（您需要将

svg

替换为

india

，已定义）

事实上，您的示例所基于的只是一项正在进行的工作，但是关于如何修复它的大部分答案都可以从Mike Bostock自己的文章中找到

本质上，json数据是异步加载的，因此需要串联加载

// load the two JSON files in series
d3.json("states.json", function(states) {
    d3.json("wealth.json", function(wealthdata) {
        ...
    });
});

然后，您可以在第一次创建每个

路径时找到相关的colorbrewer CSS类：

india.selectAll("path")

    .data(states.features)
    .enter().append("path")
    .attr("d", path)

    .attr("class", function(d) {
        return "q" + quantize(wealthdata[d.id]) + "-9";
     })

    .attr("d", path);

但您还需要定义
量化
比例、范围…：

var quantize = d3.scale.quantize()

.范围（d3.范围（9））

。。。和域（只有在加载数据后才能执行此操作：

quantize.domain([0, d3.max(d3.values(wealthdata))]);

普朗克：嗨，谢谢你的帮助。请告诉我如何从states.json在地图中显示州名。基本上问题（a）这应该会有帮助：。你需要计算每个形状的中心，然后
。将（“svg:text”）
标签添加到svg中，并使用适当的
x
和
y