无法在印度地图 - D3中显示缩放/平移和状态名称？

Question

我是 D3.js 的新手。然而，在练习了this网站的示例之后，我尝试使用约翰·库根先生的地图[{3}}。我在他的网站上找到的输出在

下面

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

问题

a）没有显示任何国家

b）缩放和平移不起作用

换句话说，在这个时候，我只期待印度地图的工作方式与Coogan先生所展示的完全一样。

需要做些什么？

Answer 1

这是工作插件：http://plnkr.co/1EqpIFecwJmkbvypTyQD?p=preview

您需要取消注释这一行：

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

在plunk中index.html的第40行，然后缩放和平移将起作用。

由于各种更复杂的错误，状态颜色（基于财富）未显示。控制台（svg is not defined引用第78行）中显示的错误只是一个开始（您需要将svg替换为india，其中 已定义。）< / p>

事实上，whole original gist您的示例基于实际上只是一项正在进行中的工作，但有关如何解决该问题的大部分答案都可以在this thread from the google group中找到，来自Mike Bostock本人。< / p>

基本上，json数据是异步加载的，因此需要按顺序加载。

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

然后，您可以在首次创建每个path时暂停相关的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);

但您还需要定义quantize比例，范围......：

var quantize = d3.scale.quantize()

.range（d3.range（9））;

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

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