Javascript 将传单标记添加到d3.js地图
我尝试将传单标记添加到d3'js地图。不幸的是,标记没有显示。是否可以混合使用这两个脚本?这是我的密码:Javascript 将传单标记添加到d3.js地图,javascript,d3.js,leaflet,Javascript,D3.js,Leaflet,我尝试将传单标记添加到d3'js地图。不幸的是,标记没有显示。是否可以混合使用这两个脚本?这是我的密码: <!DOCTYPE html> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="d3map.css" /> <link rel="stylesheet" href="leaflet.css"/> <script src="leaflet.js
<!DOCTYPE html>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="d3map.css" />
<link rel="stylesheet" href="leaflet.css"/>
<script src="leaflet.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/tile.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.quadtiles.js" type="text/javascript">
</script>
<script src="http://bl.ocks.org/emeeks/raw/f3105fda25ff785dc5ed/d3.geo.raster.js" type="text/javascript">
</script>
<script src="https://rawgit.com/emeeks/d3-carto-map/master/d3.carto.map.js" type="text/javascript">
</script>
<style>
svg{
position: absolute;
}
html,body {
height: 100%;
width: 100%;
margin: 0;
}
#map {
height: 500px;
width: 960px;
position: absolute;
}
.reproject {
position: absolute;
z-index: 99;
left: 50px;
top: 250px;
}
.metro {
fill: rgba(255,0,255,.5);
stroke: darkred;
stroke-width: 1
}
.markerButton {
position: fixed;
top: 20px;
cursor: pointer;
z-index: 99;
}
body {
background: #fcfcfa;
}
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill {
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #222;
}
.boundary {
fill: none;
stroke: #fff;
stroke-width: .5px;
}
</style>
<body onload="makeSomeMaps()">
<script>
var width = 960,
height = 500;
var projection = d3.geo.mollweide()
.scale(165)
.translate([width / 2, height / 2])
.precision(.1);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("defs").append("path")
.datum({type: "Sphere"})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("world-50m.json", function(error, world) {
if (error) throw error;
svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "boundary")
.attr("d", path);
});
d3.select(self.frameElement).style("height", height + "px");
var marker=L.marker([0,0],
{draggable:true,
});
marker.on('dragend',function(e){
//alert(marker.getLatLng().toString());
marker.getPopup().setContent('Clicked'+marker.getLatLng().toString()).openOn(map);
});
function circleMarker() {
var sizeScale = d3.scale.linear().domain([0,100,2000]).range([2,10,20]).clamp(true);
var randomDatapoint = "r" + Math.ceil(Math.random() * 7);
markers.append("circle").selectAll("*").remove();
markers.append("circle")
.attr("class", "metro")
.attr("r", function(d) {return sizeScale(d[randomDatapoint])})
}
function makeSomeMaps() {
map = d3.carto.map();
d3.select("#map").call(map);
map.centerOn([-99,39],"latlong");
map.setScale(4);
map.refresh();
cityLayer = d3.carto.layer.csv();
cityLayer
.path("cities.csv")
.label("Metro Areas")
.cssClass("metro")
.renderMode("svg")
.x("x")
.y("y")
.clickableFeatures(true)
.on("load", function(){console.log(cityLayer.dataset())});
map.addCartoLayer(cityLayer);
}
</script>
<div id="map">
<button style="left: 340px;" class="markerButton" onclick="circleMarker();">Circle Marker</button>
</div>
</body>
</html>
svg{
位置:绝对位置;
}
html,正文{
身高:100%;
宽度:100%;
保证金:0;
}
#地图{
高度:500px;
宽度:960px;
位置:绝对位置;
}
.谴责{
位置:绝对位置;
z指数:99;
左:50px;
顶部:250px;
}
.地铁{
填充:rgba(255,0255,5);
笔划:暗色;
笔画宽度:1
}
马克布顿先生{
位置:固定;
顶部:20px;
光标:指针;
z指数:99;
}
身体{
背景:#FCFA;
}
.中风{
填充:无;
行程:#000;
笔画宽度:3px;
}
.填充{
填充:#fff;
}
.分划{
填充:无;
行程:777;
笔划宽度:.5px;
笔画不透明度:.5;
}
.土地{
填充:#222;
}
.边界{
填充:无;
冲程:#fff;
笔划宽度:.5px;
}
可变宽度=960,
高度=500;
var projection=d3.geo.mollweide()
.比额表(165)
.translate([宽度/2,高度/2])
.精度(.1);
var path=d3.geo.path()
.投影(投影);
var graticule=d3.geo.graticule();
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度)
.attr(“高度”,高度);
svg.append(“defs”).append(“path”)
.datum({type:“Sphere”})
.attr(“id”、“球体”)
.attr(“d”,路径);
追加(“使用”)
.attr(“类”、“笔划”)
.attr(“xlink:href”,“#sphere”);
追加(“使用”)
.attr(“类”、“填充”)
.attr(“xlink:href”,“#sphere”);
追加(“路径”)
.基准面(分划)
.attr(“类别”、“分划”)
.attr(“d”,路径);
d3.json(“world-50m.json”,函数(错误,world){
如果(错误)抛出错误;
svg.insert(“路径”,“分划”)
.datum(topojson.feature(world,world.objects.land))
.attr(“类别”、“土地”)
.attr(“d”,路径);
svg.insert(“路径”,“分划”)
.datum(topojson.mesh(world,world.objects.countries,函数(a,b){返回a!==b;}))
.attr(“类别”、“边界”)
.attr(“d”,路径);
});
d3.选择(self.frameElement).style(“height”,height+“px”);
var marker=L.marker([0,0],
{draggable:没错,
});
标记.on('dragend',函数(e){
//警报(marker.getLatLng().toString());
marker.getPopup().setContent('Clicked'+marker.getLatLng().toString()).openOn(地图);
});
函数circleMarker(){
var sizeScale=d3.scale.linear().domain([01002000]).range([2,10,20]).clamp(true);
var randomDatapoint=“r”+Math.cell(Math.random()*7);
markers.append(“圆圈”).selectAll(“*”).remove();
标记。附加(“圆”)
.attr(“类”、“地铁”)
.attr(“r”,函数(d){return sizeScale(d[randomDatapoint])})
}
函数makeSomeMaps(){
map=d3.carto.map();
d3.选择(“#map”)。调用(map);
森特隆地图([-99,39],“拉特朗”);
地图设置比例(4);
map.refresh();
cityLayer=d3.carto.layer.csv();
城市工人
.path(“cities.csv”)
.标签(“地铁区域”)
.cssClass(“地铁”)
.renderMode(“svg”)
.x(“x”)
.y(“y”)
.可单击功能(true)
.on(“load”,function(){console.log(cityLayer.dataset())});
map.addCartoLayer(cityLayer);
}
圆圈标记
以下是直播网站:
代码在D3JS中是什么样子的,或者如何使其与D3JS地图上的传单一起工作
多谢各位,
Neko这里是live站点的链接:恐怕这个问题太广泛了。我已经在d3.js map@trincot中添加了传单标记。是否可以调试它?我尝试为它创建JSFIDLE,但由于某种原因它不能正常工作。也许它对某些人仍然有用,所以我将它粘贴到这里: