Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/json/13.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Json 无法获取d3工具提示以显示名称,仅显示编号_Json_D3.js_Tooltip - Fatal编程技术网

Json 无法获取d3工具提示以显示名称,仅显示编号

Json 无法获取d3工具提示以显示名称,仅显示编号,json,d3.js,tooltip,Json,D3.js,Tooltip,我正在尝试为我的choropleth地图设置d3工具提示。我的工具提示正常工作,并且能够从lotteryMapNum.json中提取数据,我正在使用这些数据分配贴图颜色,但是我无法显示任何文本。无论我做什么,我要么变得不确定,要么变得不确定。我想我需要以其他方式调用数据,但我不确定如何调用 var newDict = {}; d3.json("data/myData/lotteryMapNum.json", function(data) { data.forEach(function(d)

我正在尝试为我的choropleth地图设置d3工具提示。我的工具提示正常工作,并且能够从lotteryMapNum.json中提取数据,我正在使用这些数据分配贴图颜色,但是我无法显示任何文本。无论我做什么,我要么变得不确定,要么变得不确定。我想我需要以其他方式调用数据,但我不确定如何调用

var newDict = {};


d3.json("data/myData/lotteryMapNum.json", function(data) {
data.forEach(function(d) { newDict[d.id] = +d.hopeDollars;})
data.forEach(function(d) { newDict[d.COUNTY] = +d.COUNTY;});

});

d3.json("data/myData/simpleGA.json", function(json) {
  counties.selectAll("path")
  .data(json.features)
  .enter().append("svg:path")
  .attr("class", function(d) { return quantize(newDict[d.id]);})
  .attr("d", path)
  .call(d3.helper.tooltip()
            //.attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
            .text(function(d){ return 'value: '+newDict[d.id]+newDict[d.COUNTY]; })
        )
        .on('mouseover', function(d){ d3.select(this).style({fill: 'green', stroke: 'red'}); })
        .on('mouseout', function(d){ d3.select(this).style({fill: '', stroke: ''}); });

});
lotterymappnum.json

[
{"COUNTY":"APPLING",
"hopeDollars":12921240,
"id":"0"}
]
simpleGA.json

{
"type": "FeatureCollection",

"features": [
{ "type": "Feature", "id": 0, "properties": { "NAMELSAD10": "Appling County"}, "geometry": { "type": "Polygon", "coordinates": [ [ [ -83.04292, 30.947296 ], [ -83.05332, 30.94753 ],] ] } }
]
}

快速查看后,我发现两个潜在问题

1 json.features中似乎没有任何属性“d.COUNTY…”文本函数中的d'引用dom元素上的数据,该元素直接来自simpleGA.json。存在'id',但不存在'country'

相反,您可能希望参考:

d.properties['NAMELSAD10']
2两个请求并行加载,但一个响应取决于另一个响应。simpleGA.json的完成代码可能在lotteryMapNum.json请求完成之前执行。。。在这种情况下,“newDict”的元素可能仍然没有定义

一种可能的解决方案是根据依赖关系将两个请求链接起来:

var newDict = {};


d3.json("data/myData/lotteryMapNum.json", function(data) {
    data.forEach(function(d) { newDict[d.id] = +d.hopeDollars;})
    data.forEach(function(d) { newDict[d.COUNTY] = +d.COUNTY;});

    d3.json("data/myData/simpleGA.json", function(json) {
        counties.selectAll("path")
        .data(json.features)
        .enter().append("svg:path")
        .attr("class", function(d) { return quantize(newDict[d.id]);})
        .attr("d", path)
        .call(d3.helper.tooltip()
            //.attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
            .text(function(d){ return 'value: '+newDict[d.id]+newDict[d.COUNTY]; })
        )
        .on('mouseover', function(d){ d3.select(this).style({fill: 'green', stroke: 'red'}); })
        .on('mouseout', function(d){ d3.select(this).style({fill: '', stroke: ''}); });

    });

});
如果您需要更多帮助,请发布两个.json文件的链接,我可以更好地使用JSFIDLE进行故障排除

编辑:JSFIDLE给我带来了很多关于大文件大小的麻烦。。。但这基本上就是我对join这样的数据库的意思。。。还使用列表而不是geojson映射:

// load json1
d3.json("lotterMapNum.json", function(lotterMapNum) {

    // load json2
    d3.json("simpleGA.json", function(simpleGA) {


        for (var i = 0; i < simpleGA.features.length; i++) {

            newDict[simpleGA.features[i].id] = simpleGA.features[i];
        }

        for (var j = 0; j < lotteryMapNum.length; j++) {

            if (typeof newDict[lotteryMapNum[j].id] === 'undefined') {
                newDict[lotteryMapNum[j].id] = {};
            }
            newDict[lotteryMapNum[j].id].hopeDollars = lotteryMapNum[j].hopeDollars;
            newDict[lotteryMapNum[j].id].COUNTY = lotteryMapNum[j].COUNTY;

        }

        var counties = d3.select('#counties')
        .data(newDict)
        .enter()
        .append('li')
        .text(function(d){return d.id + ': ' + d.COUNTY + ', $' + d.hopeDollars;});

    }); 
});

我认为这是一个非常简单的解决方法。尝试去掉d.COUNTY前面的+,然后将每个id键的值设置为数组:

d3.json("data/myData/lotteryMapNum.json", function(data) {
    data.forEach(function(d) { newDict[d.id] = [+d.hopeDollars, d.COUNTY];});
然后以相同的方式访问工具提示文本:

.text(function(d){ return 'value: '+ newDict[d.id][0] + newDict[d.id][1]; }) 

感谢您的回复,但我也希望从lotterymappnum.json文件中获得一些其他数据,这就是我尝试访问该文件的原因。如果您愿意看一看,您可以在这里看到两个json文件:我实际上已经尝试将一个放在另一个里面,但是没有运气。jsfiddle在连接到github时表现不好。。。不过,解决方案2应该是可行的。另一种可能是在调用d3之前进行数据操作,为两个不同的javascript响应在“id”键上创建一个类似join的数据库。。。并使用数据而不是“json.features”调用新对象。我确实不止一次尝试过解决方案2。我不确定如何执行您为数据库(如join)提出的建议。理论上,我理解你的意思,但我不知道怎么做。此外,这里还有指向json文件的链接。啊,这完全有道理!非常感谢。