Javascript 试图使用D3在地图上显示条形图，出现错误：<；rect>；属性高度：属性的意外结束。“预期长度”&引用；_Javascript_Json_D3.js

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

javascript json d3.js

Javascript 试图使用D3在地图上显示条形图，出现错误：<；rect>；属性高度：属性的意外结束。“预期长度”&引用；,javascript,json,d3.js,Javascript,Json,D3.js,一般来说，我不熟悉D3和web开发。我从Elijah Meeks那里复制了这段代码的一部分：他成功地在地图上显示了代表数据的条形图，就像在地图上放置了一个分散的条形图一样我从外部加载JSON，在JSON中创建了一个名为drugDeaths的变量，并将JSON文件重命名为.js。数据是巨大的，它代表了从CDC获得的美国每个县的药物引起的死亡。我试图显示每个县的药物导致死亡人数，并将这个数字与地图上以县中心为中心的酒吧高度联系起来。因此，有可能有成千上万的酒吧被可视化数据的格式如下所示（您可以在

一般来说，我不熟悉D3和web开发。我从Elijah Meeks那里复制了这段代码的一部分：他成功地在地图上显示了代表数据的条形图，就像在地图上放置了一个分散的条形图一样

我从外部加载JSON，在JSON中创建了一个名为drugDeaths的变量，并将JSON文件重命名为.js。数据是巨大的，它代表了从CDC获得的美国每个县的药物引起的死亡。我试图显示每个县的药物导致死亡人数，并将这个数字与地图上以县中心为中心的酒吧高度联系起来。因此，有可能有成千上万的酒吧被可视化

数据的格式如下所示（您可以在此处看到）：

我的代码在下面，但它什么也不做。页面上没有显示任何内容，只是全部为白色。我错过了什么？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>


变量宽度=960，高度=960；
scaleVal=1000；
rotateVal=30；
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，width）
.attr（'高度'），高度；
投影=d3.geoAlbers（）
.scale（scaleVal）
.旋转（[121.00，-35.50,20]）
.center（[-4,5]）；
var geoPath=d3.geoPath（）
.投影（投影）；
bars=svg。选择全部（“g”）
.数据（死亡人数）
.输入（）
.附加（“g”）
.attr（“类”、“条”）
.attr（“transform”，函数（d）{return”translate（“+投影（d.坐标）+”）；}；
条。附加（“rect”）
.attr（'height'，函数（d）{return d.death}）
.attr（'width'，1）
.attr（'y'，函数（d）{return-（d.death）}）
.attr（“类”、“条”）
.style（“填充”、“绿色”）
.style（“笔划”、“白色”）
.样式（“笔划宽度”，2）；
bars.transition（）.持续时间（500）.样式（“不透明度”，1）
d3.选择（self.frameElement）.style（“height”，height+“px”）；

如果您阅读了文档，您看到的字符串是不允许的。坐标必须是经度，纬度

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

由于某些原因，矩形在

高度中给出了一个错误。设置.bar
样式解决了这个问题
bars.append("rect")
    .attr('height', function(d) {return d.Deaths})
    .attr('width', 2)
    .attr('y', function(d) {return -(d.Deaths)})
    .attr("class", "bars");

CSS
成功了。我不知道我从以利亚·米克斯（Elijah Meeks）那里复制的例子是如何起作用的。这可能是因为D3版本的不同吗？@AllanRimban:如果你看一下示例“坐标”：[-122.682,45.52]
bars.append("rect")
    .attr('height', function(d) {return d.Deaths})
    .attr('width', 2)
    .attr('y', function(d) {return -(d.Deaths)})
    .attr("class", "bars");

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