Question

我是D3和Web开发的新手。我从伊莱贾·米克斯（Elijah Meeks）复制了部分代码：http://bl.ocks.org/emeeks/4531633，在那里他成功地在地图上显示了代表数据的条形，就像在地图上放置了分散的条形图一样。

我正在从外部加载JSON，在JSON中创建了一个名为drugDeaths的变量，并将JSON文件重命名为.js。数据巨大，它代表了从CDC获得的美国每个县的药物引起的死亡。我试图显示每个县因毒品引起的死亡，并将此数字与以地图上该县质心为中心的条形高度相关联。因此，有可能显示成千上万个条。

数据格式如下（您可以在https://github.com/allanrimban/allanrimban.github.io/tree/master/maps/drug_deaths_county上看到它）：

 {
     "X": -113.758151046471,
     "Y": 35.7045834851058,
     "GEOID": 4015,
     "LONG": -113.7582,
     "LAT": 35.7046,
     "County": "Mohave County, AZ",
     "Deaths": 63,
     "Population": 205249,
     "Crude Rate": 30.7,
     "coordinates": "-113.7582,35.7046"
 },
 {
     "X": -90.4054985445433,
     "Y": 30.6267806285343,
     "GEOID": 22105,
     "LONG": -90.4055,
     "LAT": 30.6268,
     "County": "Tangipahoa Parish, LA",
     "Deaths": 38,
     "Population": 130710,
     "Crude Rate": 29.1,
     "coordinates": "-90.4055,30.6268"
 },

我的代码在下面，但是什么也不做。页面上什么都没有显示，只是全白。我想念什么？ D3可以处理与quetsion中的文件一样大的文件吗？我感谢任何反馈。谢谢。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <script src="https://d3js.org/d3.v5.js"></script>
    <script src="https://d3js.org/topojson.v0.min.js"></script>
    <script src="Drug_Deaths_County_Simple_JSON.js"></script>
</head>
<body>        
    <script>

        var width = 960, height = 960;
        scaleVal = 1000;            
        rotateVal = 30;

        var svg = d3.select('body')
                            .append('svg')
                            .attr('width', width)
                            .attr('height', height);
        projection = d3.geoAlbers()              
          .scale(scaleVal)
          .rotate([121.00, -35.50, 20])
          .center([-4, 5]);


        var geoPath = d3.geoPath()
            .projection(projection);

        bars = svg.selectAll("g")
          .data(drugDeaths)
          .enter()
          .append("g")
          .attr("class", "bars")
          .attr("transform", function(d) {return "translate(" + projection(d.coordinates) + ")";});
        bars.append("rect")               
            .attr('height',  function(d) {return d.Deaths})
            .attr('width', 1)
            .attr('y', function(d) {return -(d.Deaths)})
            .attr("class", "bars")
            .style("fill", "green")
            .style("stroke", "white")
            .style("stroke-width", 2);

        bars.transition().duration(500).style("opacity", 1)
        d3.select(self.frameElement).style("height", height + "px");                            


    </script>
</body>

</html>

Answer 1

如果您阅读文档https://github.com/d3/d3-geo#_projection，则会看到不允许使用字符串。并且坐标必须是经度，纬度。

with_options

由于某些原因，rect在.attr("transform", function(d) {return "translate(" + projection([d.LONG, d.LAT]) + ")";});中给出错误。设置height样式即可解决。

.bars

CSS

bars.append("rect")
    .attr('height', function(d) {return d.Deaths})
    .attr('width', 2)
    .attr('y', function(d) {return -(d.Deaths)})
    .attr("class", "bars");

尝试在具有D3的地图上显示条形，错误：<rect>属性高度：属性意外结束。预期长度“”

1 个答案: