Javascript 使用坐标为d3.js的json文件创建多行
我正在尝试绘制多条线，这些线将使用位于此处的json文件中的坐标创建地图 我能够创建svg，但无法显示行。下面是到目前为止我用来创建svg并尝试画线的代码。这是我第一次使用d3和JSON文件，因此任何解释都非常感谢Javascript 使用坐标为d3.js的json文件创建多行,javascript,svg,d3.js,line,Javascript,Svg,D3.js,Line,我正在尝试绘制多条线，这些线将使用位于此处的json文件中的坐标创建地图 我能够创建svg，但无法显示行。下面是到目前为止我用来创建svg并尝试画线的代码。这是我第一次使用d3和JSON文件，因此任何解释都非常感谢 <!DOCTYPE html> <html lang="en"> <head> <meta charset = "UTF-8"> <script s
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<title></title>
</head>
<body>
<script type = "text/javascript">
var streets; // declare global variable
var w = 960; // width of svg
var h = 800; // height of svg
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", w )
.attr( "height", h )
.style('background-color', 'black');
d3.json("/data/streets.json", function(json){
streets = json; //copy data from json to streets
console.log(json); // output json to console
var link = svg.selectAll(".link")
.data([streets])
.enter().append("line")
.attr("class", "link")
.style('stroke','green')
.style("stroke-width", 5);
link.attr("x1", function(d) { console.log(d); return d.x1; })
.attr("y1", function(d) { return d.y1; })
.attr("x2", function(d) { return d.x2; })
.attr("y2", function(d) { return d.y2; });
});
}
</script>
</body>
</html>
var街道；//声明全局变量
var w=960；//svg的宽度
var h=800；//svg的高度
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.style（“背景色”、“黑色”）；
d3.json（“/data/streets.json”），函数（json）{
streets=json；//将数据从json复制到streets
log（json）；//将json输出到控制台
var link=svg.selectAll（“.link”）
.数据（[街道]）
.enter（）.append（“行”）
.attr（“类”、“链接”）
.style（'stroke'，'green'）
.样式（“笔划宽度”，5）；
link.attr（“x1”，函数（d）{console.log（d）；返回d.x1；}）
.attr（“y1”，函数（d）{返回d.y1；}）
.attr（“x2”，函数（d）{返回d.x2；}）
.attr（“y2”，函数（d）{返回d.y2；}）；
});
}
[streets]streets.linkstreetsstreets[
{
"x": 16.7380009,
"y": 18.6959991
},
{
"x": 17.6599998,
"y": 18.7119999
}
]
.attr（“…”，函数（d）{…}）function(d) { return d.x1; }
function(d) { return d[0].x; }
var；//声明全局变量
var w=160；//svg的宽度
var h=160；//svg的高度
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）
.style（'背景色'，'黑色'）
街道=[
[
{
“x”：126.7380009，//修改
“y”：128.6959991//修改
},
{
“x”：17.6599998，
“y”：18.7119999
}
],
[
{
“x”：14.4619999，
“y”：18.6550007
},
{
“x”：16.7380009，
“y”：18.6959991
}
],
[
{
“x”：12.7938805，
“y”：18.6161308
},
{
“x”：14.4619999，
“y”：18.6550007
}
]
]
var link=svg.selectAll（“.link”）
.数据（街道）
.enter（）.append（“行”）
.attr（“类”、“链接”）
.style（'stroke'，'green'）
.样式（“笔划宽度”，5）
.attr（“x1”，函数（d）{返回d[0].x；}）
.attr（“y1”，函数（d）{返回d[0].y；}）
.attr（“x2”，函数（d）{返回d[1].x；}）
.attr（“y2”，函数（d）{返回d[1].y；}）；svg{
边框：1px纯黑；
}