尝试使用 D3 在地图上显示条形图，出现错误：<rect> 属性高度：属性意外结束。预期长度，“”答案

【问题标题】：Trying to display bars on a map with D3, getting Error: <rect> attribute height: Unexpected end of attribute. Expected length, ""尝试使用 D3 在地图上显示条形图，出现错误：<rect> 属性高度：属性意外结束。预期长度，“”
【发布时间】：2018-09-04 11:12:27
【问题描述】：

我是 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 可以处理与问题中的文件一样大的文件吗？我很感激任何反馈。谢谢。

<!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>

【问题讨论】：

标签： javascript json d3.js

【解决方案1】：

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

.attr("transform", function(d) {return "translate(" + projection([d.LONG, d.LAT]) + ")";});

由于某种原因，rects 在height 中出现错误。设置.bars 样式解决了它。

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

CSS

.bars {
fill: green;
stroke: white;
stroke-width: 1;
}

【讨论】：

那行得通。我不知道我从 (Elijah Meeks) 复制的示例是如何使它起作用的。会不会是因为 D3 的版本不同？
@AllanRimban：如果你看一下例子"coordinates": [-122.682,45.52]