Javascript JSON映射上项目的用户输入

我在这里有以下D3.js项目：

纬度和经度输入位于地图下方

它应该获取用户输入的纬度和经度数字，并在给定坐标处“投影”svg圆。问题是我要么得到的不是一个函数错误，要么开发工具没有抛出任何错误，但是这些圆永远不会被投影

---

这是一个短文件，有人能解释一下为什么它没有按我的想法工作吗？

你的更新功能没有任何意义

它接受两个输入，但您只能用一个来调用它

.selectAll（“圆圈”）.enter（）无效
d3
语法
您需要使用纬度和经度调用
projection
，通过
0
，这将导致它返回
null
，因为它在投影之外
修复所有这些之后，您仍然会离开，因为您已按边距移动了路径，最好将它们放在按边距移动的
g
中
综上所述，一个简单的重写将是：

var lat = d3.select("#latValue").on("input", function() {
    update();
}).node();

var long = d3.select("#lonValue").on("input", function() {
    update();
}).node();

function update() {

  // lat/long to pixel
  var coors = projection([long.value, lat.value]);

  // if outside projection don't add circle
  if (coors === null) return;

  // add circle
    container
        .append("circle")
        .attr("cx", coors[0])
        .attr("cy", coors[1])
        .attr("r", Math.sqrt(5) * 4)
        .style("fill", "black")
        .style("opacity", 0.85);
}

运行代码：



/*鼠标悬停时，亮显状态颜色*/
路径：悬停{
填充不透明度：.7；
}
//地图的宽度和高度
var宽度=960；
var高度=500；
变量边距={左：0，上：100，右：0，下：0}；
//D3投影
var projection=d3.geo.albersUsa（）
.translate（[width/2，height/2]）//平移到屏幕中心
.刻度（[1000]）；//缩小规模，让我们看到整个世界
//定义路径生成器
var path=d3.geo.path（）//将GeoJSON转换为SVG路径的路径生成器
.投影（投影）；//告诉路径生成器使用albersUsa投影
//定义输出的线性比例
var color=d3.scale.linear（）
.范围（[“#c3e2ff”、“#15198e”]）；
//创建SVG元素并将映射附加到SVG
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度+页边距.top）；
append（'text'）
.text（'坐标查询'）
.attr（'font-size'，'24px'）
.attr（'transform'，'translate（'+30+'，'+70+'））
.attr（'font-family'，'Calibri'）；
append（'text'）
.text（“截至2016年12月的数据”）
.attr（'font-size'，'12px'）
.attr（'transform'，'translate（'+35+'，'+100+'））
.attr（'font-family'，'Calibri'）；
//加载我的状态数据！
color.domain（[0100]）；//设置输入数据的范围
//加载GeoJSON数据并与状态数据合并
d3.json（“https://jsonblob.com/api/573228c3-d068-11e6-b16a-b501dc8d2b08，函数（json）{
//var坐标=d3.鼠标（此）；
//将数据绑定到SVG，并为每个GeoJSON功能创建一个路径
var container=svg.append（“g”）
.attr（'transform'，'translate（'+margins.left+'，'+margins.top+'））；
container.selectAll（“路径”）
.data（json.features）
.输入（）
.append（“路径”）
.attr（“d”，路径）
.style（“笔划”、“fff”）
.style（“笔划线条连接”、“圆形”）
.样式（“笔划宽度”、“1.5”）
.样式（“填充”、“钢蓝”）；
//修改Mike Bostock的图例代码：http://bl.ocks.org/mbostock/3888852
var lat=d3。选择（#latValue”）。打开（“输入”，函数（）{
更新（）；
}).node（）；
var long=d3。选择（#lonValue”）。打开（“输入”，函数（）{
更新（）；
}).node（）；
函数更新（）{
//横向/纵向至像素
var coors=投影（[长值，横向值]）；
//如果外部投影不添加圆
如果（coors==null）返回；
//加圈
容器
.附加（“圆圈”）
.attr（“cx”，coors[0]）
.attr（“cy”，coors[1]）
.attr（“r”，数学sqrt（5）*4）
.样式（“填充”、“黑色”）
.样式（“不透明度”，0.85）；
}
});

格度：
经度：

您的更新功能没有任何意义

它接受两个输入，但您只能用一个来调用它
.selectAll（“圆圈”）.enter（）无效
d3
语法
您需要使用纬度和经度调用
projection
，通过
0
，这将导致它返回
null
，因为它在投影之外
修复所有这些之后，您仍然会离开，因为您已按边距移动了路径，最好将它们放在按边距移动的
g
中
综上所述，一个简单的重写将是：

var lat = d3.select("#latValue").on("input", function() {
    update();
}).node();

var long = d3.select("#lonValue").on("input", function() {
    update();
}).node();

function update() {

  // lat/long to pixel
  var coors = projection([long.value, lat.value]);

  // if outside projection don't add circle
  if (coors === null) return;

  // add circle
    container
        .append("circle")
        .attr("cx", coors[0])
        .attr("cy", coors[1])
        .attr("r", Math.sqrt(5) * 4)
        .style("fill", "black")
        .style("opacity", 0.85);
}

运行代码：



/*鼠标悬停时，亮显状态颜色*/
路径：悬停{
填充不透明度：.7；
}
//地图的宽度和高度
var宽度=960；
var高度=500；
变量边距={左：0，上：100，右：0，下：0}；
//D3投影
var projection=d3.geo.albersUsa（）
.translate（[width/2，height/2]）//平移到屏幕中心
.刻度（[1000]）；//缩小规模，让我们看到整个世界
//定义路径生成器
var path=d3.geo.path（）//将GeoJSON转换为SVG路径的路径生成器
.投影（投影）；//告诉路径生成器使用albersUsa投影
//定义输出的线性比例
var color=d3.scale.linear（）
.范围（[“#c3e2ff”、“#15198e”]）；
//创建SVG元素并将映射附加到SVG
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度+页边距.top）；
append（'text'）
.text（'坐标查询'）
.attr（'font-size'，'24px'）
.attr（'transform'，'translate（'+30+'，'+70+'））
.attr（'font-family'，'Calibri'）；
append（'text'）
.text（“截至2016年12月的数据”）
.attr（'font-size'，'12px'）
.attr（'transform'，'translate（'+35+'，'+100+'））
.attr（'font-family'，'Calibri'）；
//加载我的状态数据！
color.domain（[0100]）；//设置输入数据的范围
//加载GeoJSON数据并与状态数据合并
d3.json（“https://jsonblob.com/api/573228c3-d068-11e6-b16a-b501dc8d2b08，函数（json）{
//var坐标=d3.鼠标（此）；
//将数据绑定到SVG，并为每个GeoJSON功能创建一个路径
var container=svg.append（“g”）
.attr（'transform'，'translate（'+margins.left+'），'+