d3.js - Link in D3 bar chart -


i creating d3 bar chart using below code . 

<head>  <style>   .axis {    font: 10px sans-serif;  }     .axis path,  .axis line {    fill: none;   stroke: #000;   shape-rendering: crispedges; }   </style> </head> 

<script src="http://d3js.org/d3.v3.min.js"></script>  <script>  var margin = {top: 20, right: 20, bottom: 70, left: 40}, width = 600 - margin.left - margin.right, height = 300 - margin.top - margin.bottom;  var x = d3.scale.ordinal().rangeroundbands([0, width], .05);  var y = d3.scale.linear().range([height, 0]);  var xaxis = d3.svg.axis() .scale(x) .orient("bottom");  var yaxis = d3.svg.axis() .scale(y) .orient("left") .ticks(10);  var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform",        "translate(" + margin.left + "," + margin.top + ")");   var data = [{"text":"a","value":50,"linkurl":"http://google.com"},   {"text":"b","value":100,"linkurl":"http://php.net"},{"text":"c","value":150,"linkurl":"http://drupal.org"}]  data.foreach(function(d) {      d.text = d.text;     d.value = +d.value;     d.linkurl = d.linkurl; });   x.domain(data.map(function(d) { return d.text; }));  y.domain([0, d3.max(data, function(d) { return d.value; })]);     svg.append("g")   .attr("class", "x axis")   .attr("transform", "translate(0," + height + ")")   .call(xaxis) .selectall("text")   .style("text-anchor", "end")   .attr("dx", "-.8em")   .attr("dy", "-.55em")   .attr("transform", "rotate(-45)" );    svg.append("g")   .attr("class", "y axis")   .call(yaxis) .append("text")   .attr("transform", "rotate(-90)")   .attr("y", 6)   .attr("dy", ".71em")   .style("text-anchor", "end")   .text("");    svg.selectall("bar")   .data(data)  .enter().append("rect")   .style("fill", "steelblue")   .attr("x", function(d) { return x(d.text); })   .attr("width", x.rangeband())   .attr("y", function(d) { return y(d.value); })   .attr("height", function(d) { return height - y(d.value); });     svg.on("click", function (d) { //<-d      //var position = d3.mouse(svg.node());     window.location.href='http://google.com';   //window.location.href=d.linkurl;   });          </script>    </body>

and want create link on each bar.. using code . working fine when using same url each bar doesn't different url each bar...

var data = [{"text":"a","value":50,"linkurl":"http://google.com"},{"text":"b","value":100,"linkurl":"http://php.net"},{"text":"c","value":150,"linkurl":"http://drupal.org"}]  data.foreach(function(d) {      d.text = d.text;     d.value = +d.value;     d.linkurl = d.linkurl; });   svg.on("click", function (d) { //<-d             //var position = d3.mouse(svg.node());     window.location.href='http://google.com';   //window.location.href=d.linkurl;  });

you have bind click listener bars (rectangles) instead of svg.

var bars = svg.selectall("bar")     .data(data)     .enter()     .append("rect")     .style("fill", "steelblue")     .attr("x", function(d) {         return x(d.text);     }).attr("width", x.rangeband())     .attr("y", function(d) {         return y(d.value);     }).attr("height", function(d) {         return height - y(d.value);     });  bars.on("click", function(d) {     window.location.href = d.linkurl; }); 

var margin = {      top: 20,      right: 20,      bottom: 70,      left: 40  }, width = 600 - margin.left - margin.right, height = 300 - margin.top - margin.bottom;    var x = d3.scale.ordinal().rangeroundbands([ 0, width ], .05);    var y = d3.scale.linear().range([ height, 0 ]);    var xaxis = d3.svg.axis().scale(x).orient("bottom");    var yaxis = d3.svg.axis().scale(y).orient("left").ticks(10);    var svg = d3.select("body")      .append("svg")      .attr("width", width + margin.left + margin.right)      .attr("height", height + margin.top + margin.bottom)      .append("g")      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    var data = [ {      text: "a",      value: 50,      linkurl: "http://google.com"  }, {      text: "b",      value: 100,      linkurl: "http://php.net"  }, {      text: "c",      value: 150,      linkurl: "http://drupal.org"  } ];    data.foreach(function(a) {      a.text = a.text;      a.value = +a.value;      a.linkurl = a.linkurl;  });    x.domain(data.map(function(a) {      return a.text;  }));    y.domain([ 0, d3.max(data, function(a) {      return a.value;  }) ]);    svg.append("g")      .attr("class", "x axis")      .attr("transform", "translate(0," + height + ")")      .call(xaxis)      .selectall("text")      .style("text-anchor", "end")      .attr("dx", "-.8em")      .attr("dy", "-.55em")      .attr("transform", "rotate(-45)");    svg.append("g")      .attr("class", "y axis")      .call(yaxis)      .append("text")      .attr("transform", "rotate(-90)")      .attr("y", 6)      .attr("dy", ".71em")      .style("text-anchor", "end")      .text("");    var bars = svg.selectall("bar")      .data(data)      .enter()      .append("rect")      .style("fill", "steelblue")      .attr("x", function(a) {          return x(a.text);      }).attr("width", x.rangeband())      .attr("y", function(a) {          return y(a.value);      }).attr("height", function(a) {          return height - y(a.value);      });    bars.on("click", function(a) {         window.location.href = a.linkurl;  });
.axis {     font: 10px sans-serif;   }       .axis path,   .axis line {     fill: none;    stroke: #000;    shape-rendering: crispedges;  }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more