javascript - How to add a link to a geography (created as a json path) in D3.js? -

-

i have simple map of nyc boroughs in d3.js. i'd add link each borough, can't figure out how so.

below code have right now-- there's placeholder link new york times website. however, it's adding <a href> inside of <path> tag, doesn't work. how can attach link? possible?

thanks!

<!doctype html>     <meta charset="utf-8">      <style>     #boroughs {       stroke: none;         stroke-width: 0px;         fill: #ddd;         opacity:.7;         position:absolute;         top:0;         left:0;     }     </style>      <script src="http://d3js.org/d3.v3.min.js"></script>      <body>     <script>      // map     var width = math.max(960, window.innerwidth),         height = math.max(500, window.innerheight);      var container = d3.select("body").append("div")             .attr("id", "container")             .style("width", width + "px")             .style("height", height + "px");      var projection = d3.geo.mercator()             .center([-73.94, 40.70])             .scale(80000)             .translate([(width) / 2, (height)/2]);      var path = d3.geo.path()             .projection(projection);      d3.json("nyc.json", function(error, nyb) {      var map = container.append("svg")             .attr("id", "boroughs")             .style("width", width + "px")             .style("height", height + "px")             .selectall("path")             .data(nyb.features)             .enter().append("path")             .attr("class", function(d){ return d.properties.borough; })             .attr("d", path)             .attr("xlink:href", "http://www.nytimes.com");     });       </script>     </body>     </html>

there 2 ways add links svg shapes:

  1. use of <svg:a> element. have stated in question, won't work if nested within element link should added. element of same name in html, need wrap <a> around content should have link attached.

    var map = container.append("svg")         .attr("id", "boroughs")         .style("width", width + "px")         .style("height", height + "px")       .selectall("path")         .data(nyb.features)         .enter()         .append("a")                                     // link goes here...           .attr("xlink:href", "http://www.nytimes.com")                                              .append("path")                                  // ...wrapping path.           .attr("class", function(d){             return d.properties.borough;           })           .attr("d", path);

  2. as laid out in cyril's answer attach javascript event listener handling click events.


Comments

Post a Comment

Popular posts from this blog

Capture and play voice with Asterisk ARI -

-
there channel ari demo in wich can control channel state: ring, answer, play silence, play tone or audio-file ( https://github.com/asterisk/ari-examples/tree/master/channel-state , https://wiki.asterisk.org/wiki/display/ast/ari+and+channels%3a+manipulating+channel+state ) possible receive chunks (parts, buffers, etc.) of call voice (which created remote subscriber) or write chunks of voice, example array of bytes (not file) in audio format (alaw, ulow etc). you can use asterisk eagi interface voice data. other option use record or mixmonitor app record channel(channel have put stasis allow dialplan control ari) "write chunks of voice" can done application playback also can create own application using c/c++, compile asterisk , result want. no, can't redirect voice directly using ari.
Read more

python - How to use elasticsearch.helpers.streaming_bulk -

-
can advice how use function elasticsearch.helpers.streaming_bulk instead elasticsearch.helpers.bulk indexing data elasticsearch. if change streaming_bulk instead of bulk, nothing gets indexed, guess needs used in different form. code below creates index, type , index data csv file in chunks of 500 elemens elasticsearch. working wandering possible increse prerformance. that's why want try out streaming_bulk function. currently need 10 minutes index 1 million rows csv document of 200mb. use 2 machines, centos 6.6 8 cpu-s, x86_64, cpu mhz: 2499.902, mem: 15.574g total. not sure can go faster. es = elasticsearch.elasticsearch([{'host': 'uxmachine-test', 'port': 9200}]) index_name = 'new_index' type_name = 'new_type' mapping = json.loads(open(config["index_mapping"]).read()) #read mapping json file es.indices.create(index_name) es.indices.put_mapping(index=index_name, doc_type=type_name, body=mapping) open(file_to_index, ...
Read more