我是java脚本和D3的新手。我从在线选择了d3.geo.mercator代码,并使用单个.csv文件根据纬度和经度显示员工和客户。我的老板希望分别选择员工或客户。 我在下面做了一个html来重定向到具有相同代码但不同.csv文件的不同html文件但是当点击员工选项时我得到错误"属性cx:预期长度," NaN"。&# 34;
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>MyCompany</Title>
</head>
<body>
<form action="">
<h2>Select Your Choice..</h2>
<input type="button" value="Customers" onclick="window.location.href='Customers.html';">
<input type="button" value="Employees" onclick="window.location.href='Employees.html';">
</form>
</body>
</html>
由于D3代码相同而不是使用两个.html文件,我希望根据所选的选项选择.csv文件,我需要帮助才能做到这一点。谢谢,感谢您的帮助。
<script>
var width = 960,
height = 960;
var projection = d3.geo.mercator()
.center([0, 5 ])
.scale(200)
.rotate([-180,0]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = d3.geo.path()
.projection(projection);
var g = svg.append("g");
// load and display the World
d3.json("world-110m2.json", function(error, topology) {
// load and display the cities
d3.csv("Customers.csv", function(error, data) {
g.selectAll("circle")
.data(data)
.enter()
.append("a")
.attr("xlink:href", function(d) {
return "https://www.google.com/search?q="+d.city;}
)
.append("circle")
.attr("cx", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("cy", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("r", 5)
.style("fill", function(d) {
if (d.category == "Employee") {return "red"}
else if (d.category == "Office" ) {return "lawngreen"} // <== Right here
else { return "blue" }
;})
g.selectAll("text")
.data(data)
.enter()
.append("text") // append text
.attr("x", function(d) {
return projection([d.lon, d.lat])[0];
})
.attr("y", function(d) {
return projection([d.lon, d.lat])[1];
})
.attr("dy", -7) // set y position of bottom of text
.style("fill", "black") // fill the text with the colour black
.attr("text-anchor", "middle") // set anchor y justification
.text(function(d) {return d.city;}); // define the text to display
});
g.selectAll("path")
.data(topojson.object(topology, topology.objects.countries)
.geometries)
.enter()
.append("path")
.attr("d", path)
});
// zoom and pan
var zoom = d3.behavior.zoom()
.on("zoom",function() {
g.attr("transform","translate("+
d3.event.translate.join(",")+")scale("+d3.event.scale+")");
g.selectAll("circle")
.attr("d", path.projection(projection));
g.selectAll("path")
.attr("d", path.projection(projection));
});
svg.call(zoom)
</script>
答案 0 :(得分:0)
我理解的目标是让一个页面包含一个脚本,允许用户显示来自2个(或任意)个csv文件之一的数据。
实现目标有两种主要方法。
渲染所有数据,但有选择地隐藏/显示元素(例如,通过使用类名来标识应显示哪些数据)。
按需加载特定的csv文件并显示它(通过删除以前的数据并重新绘制或更新绘制的数据点)。
这两种方法都可以通过一个函数触发,该函数传递a)应该显示的类的名称,或b)包含所需数据的csv的名称。
我已经将两个示例放在一起,展示了这可能对上述两个选项有效。
说明:一旦绘制了两个CSV文件中的所有内容,我们需要做的就是为每个按钮分配一个事件监听器,以便在单击时,按钮的id被传递给隐藏所有内容的更新函数没有类型等于按钮的id。
为了炫耀,我没有使用每个数据点的可见性属性,而是在需要消失时通过转换将要素半径更改为零,并使用转换来执行显示它们时相反。
说明:立即绘制CSV文件。为每个按钮分配一个事件监听器,以便在单击时,按钮的id(在这种情况下为文件名)将传递给更新功能。更新功能通过对数据执行输入,更新和退出转换(淡出不需要的数据点,将点转换到新位置以及根据需要添加新数据点)来绘制所选CSV。
第二个选项实现的替代方法是简单地删除所有以前的数据点,并绘制所需的csv数据,就好像您是第一次绘制它一样。