i have d3.js map of world using world-50m.json having problems fitting entire map container.
here picture of problem is:
my code:
d3.json("libraries/world-50m.json", function(error, world) { var mapratio = .5; var width = 1600; var height = 800; var svg = d3.select("div#chart svg") .attr("width", "100%") .attr("height", "100%") .attr("viewbox", "0 0 " + math.min(width, height) + " " + math.min(width, height)); var projection = d3.geo.equirectangular() .scale(height / math.pi) .translate([width / 2, height / 2]); var path = d3.geo.path() .projection(projection); var graticule = d3.geo.graticule(); if (error) { return console.error(error); } svg.append("g") .attr("height", height) .attr("width", width) .attr("class", "land") .selectall("path") .data([topojson.object(world, world.objects.land)]) .enter().append("path") .attr("d", path); svg.append("g") .attr("height", height) .attr("width", width) .attr("class", "boundary") .selectall("boundary") .data([topojson.object(world, world.objects.countries)]) .enter().append("path") .attr("d", path); svg.append("g") .attr("class", "graticule") .selectall("path") .data(graticule.lines) .enter().append("path") .attr("d", path); var svg = d3.select("#chart svg").append("g"); var serververticesurl = json_url; var coordinatedata = $.getjson( serververticesurl, function (data, status) { if (status === "success") { // no error detected, var vertexjson = data; var coordinates = []; // check have data map. if (vertexjson.length > 0) { // plot points on map... vertexjson.foreach(function(column) { var value = column.location; var origin = column.vertex; var col1 = "longitude"; var col2 = "latitude"; var atklong = value.match(/(.*)~.*/); var atklat = value.match(/.*~(.*)/); coordinates.push([atklong[1], atklat[1], origin]); }); if (typeof data.message === "string") { vertexjson = []; } var atknodeselection = svg.selectall("circle"); var honeypotnode = svg.selectall("circle"); // appending attack nodes var atknode = atknodeselection.data(coordinates) .enter().append("svg:circle") .attr("class", "atknode") .attr("r", 5) .attr("cx", function(d) { return projection([parsefloat(d[0]), parsefloat(d[1])])[0]; }) .attr("cy", function(d) { return projection([parsefloat(d[0]), parsefloat(d[1])])[1]; }); // appending honeypot node var hpnode = honeypotnode.data([[-73.934543,41.722841]]) .enter().append("svg:circle") .attr("class", "honeypot") .attr("r", 7) .attr("cx", function(d) { return projection([d[0], d[1]])[0]; }) .attr("cy", function(d) { return projection([d[0], d[1]])[1]; }); var link = svg.selectall(".link").data(coordinates).enter().append("line").attr("class", "link") .attr("x1", function(d) { return projection([parsefloat(d[0]), parsefloat(d[1])])[0]; }) .attr("y1", function(d) { return projection([parsefloat(d[0]), parsefloat(d[1])])[1]; }) .attr("x2", function(d) { return projection([-73.934543,41.722841])[0]; }) .attr("y2", function(d) { return projection([-73.934543,41.722841])[1]; }) .attr("d", function (d) { var x1 = projection([parsefloat(d[0]), parsefloat(d[1])])[0], y1 = projection([parsefloat(d[0]), parsefloat(d[1])])[1], x2 = projection([-73.934543,41.722841])[0], y2 = projection([-73.934543,41.722841])[1], // defaults normal edge. drx = 0, dry = 0, xrotation = 0, // degrees largearc = 0, // 1 or 0 sweep = 1; // 1 or 0 return "m" + x1 + "," + y1 + "a" + drx + "," + dry + " " + xrotation + "," + largearc + "," + sweep + " " + x2 + "," + y2; }); structure of container:
<div id="#chart"> <svg> <g class="land | boundary | graticule"> </g> </svg> </div> css:
/*================================================== * map * ===============================================*/ .graticule { fill: #3385ff; fill-opacity: .3; stroke: #777; stroke-width: 0.5px; stroke-opacity: 0.5; } .land { fill: #d0d0e1; margin-left: 0px; } .boundary { fill: none; stroke: #0066ff; stroke-width: 0.5px; } /*================================================== * attack nodes * ===============================================*/ .atknode { fill: red; shape-rendering: auto; fill-opacity: .7; stroke-opacity: .8; z-index: 2002; } .atknode:hover { fill: #0039e6; fill-opacity: .5; }
Comments
Post a Comment