javascript - d3 - how to resize an individual state map drawn from a full US clipPath -


i'm working d3 framework , i'm curious how/if it's possible go making individual county level state map created clippath of state boundaries responsive without having redraw map scratch.

i tried adjust width , height attrbutes of svg using:

d3.selectall(".ismap").attr("width", width).attr("height", width * 1.5); d3.selectall(".ismap").selectall("path").attr("d", path);

however did not return expected result (a small blip of land display on resize event).

anyway here i'm at:

var $width = $(window).width();  var $height = $width * .8; var width = $width,     height = $height; var projection = d3.geo.albers(); var path = d3.geo.path().projection(projection); var svg = d3.select('.map-wrapper').append("svg").attr("width", width).attr("height", height).attr("class", "state-map ismap");  d3.json("map_json/us_county_land.json", function(error, us) {      if (error) throw error;     var states = topojson.feature(us, us.objects.states),         state = states.features.filter(function(d) {             return d.id === 36;         })[0];      projection.scale(1).translate([0, 0]);      var b = path.bounds(state),         s = .95 / math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),         t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];      projection.scale(s).translate(t);      svg.append("path").datum(topojson.mesh(us, us.objects.states, function(a, b) {         return !== b;     })).attr("class", "mesh").attr("d", path);      svg.append("path").datum(state).attr("d", path).attr("id", "land");      svg.append("clippath").attr("id", "clip-land").append("use").attr("xlink:href", "#land");      svg.selectall("path").data(topojson.feature(us, us.objects.counties).features).enter().append("path").attr("d", path).attr("data-county", function(d) {         return d.id;     }).attr("clip-path", "url(#clip-land").attr("class", "county").on('mouseover', function(d, i) {         d3.select(this.parentnode.appendchild(this)).transition().duration(300)             .style({                 'stroke-opacity': 1,                 'stroke': '#000',                 'stroke-width': '1px'             });     }).on('mouseout', function(d, i) {         d3.select(this.parentnode.appendchild(this)).transition().duration(300)             .style({                 'stroke-opacity': 1,                 'stroke': '#fff',                 'stroke-width': '1px'             });     });  });

this did trick:

 svg.attr("viewbox", "0 0 " + width + " " + height ).attr("preserveaspectratio", "xminymin")

-

Comments

Post a Comment

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

i writing web app multiple listeners(evcentsource sse clients js) connected server . want store sse emitter per connected listener : can done in memory or other means assigning id each client able achieve far now question ; how send response/event specific client connected web app ? while doing sseemmiters stored either getting completed or timed out. how prevent ? how keep sseemmiter available open infinite time (till client closes) , send events selectively .
Read more

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

i'm trying implement crud operation using datatableseditor using datatables.but i'm getting error messages: 1)uncaught exception: datatables editor - remote hosting of code not allowed. please see http://editor.datatables.net details on how purchase editor license 2)typeerror: a.editor undefined 3) $.fn.datatable.editor not constructor" what reason? here configuration: <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.datatables.min.css"> <link re...
Read more

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -

i trying convert json java object use of gson in maven, following youtube video guidance - https://www.youtube.com/watch?v=vqgghm9pwe0 , theres error occurs when in main class error - package com.squareup.okhttp3 doesn't exist. code below: java package com.codebeasty.json; import com.squareup.okhttp3.okhttpclient; public class main { private static okhttpclient client = new okhttpclient(); public static void main (string [] args) { } } i put in dependency in pom.xml: <dependencies> <dependency> <groupid>com.squareup.okhttp3</groupid> <artifactid>okhttp</artifactid> <version>3.4.2</version> </dependency> <dependency> <groupid>com.google.code.gson</groupid> <artifactid>gson</artifactid> <version>2.8.0</version> </dependency> </dependencies> i dont understand why doesn't recognize com.squareup. there may need download? have downl...
Read more