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

how to prompt save As Box in Excel Interlop c# MVC 4 -

i want export excel sheet using excel interloop... i have datatable convert excel sheet... now there way save file using save dialogue box in mvc 4 here code public string datatabletoexcel(datatable dt, string htmlheading, string key) { try { microsoft.office.interop.excel.application excel; microsoft.office.interop.excel.workbook excelworkbook; microsoft.office.interop.excel.worksheet excelsheet; microsoft.office.interop.excel.range excelcellrange; excel = new microsoft.office.interop.excel.application(); excel.visible = false; excel.displayalerts = false; excelworkbook = excel.workbooks.add(type.missing); excelsheet = (microsoft.office.interop.excel.worksheet)excelworkbook.activesheet; excelsheet.name = "sheet1"; dataset ...
Read more

xslt 1.0 - How to access or retrieve mets content of an item from another item? -

my use case have item has link in item. example, item 123456789/152 has metadata field dc.relation.hasversion=123456789/717 . within item view of 123456789/152 , how can retrieve values of metadata of 123456789/717 ? example, want retrieve dc.language.iso value of 123456789/717 123456789/152 . i looked @ related items feature in dspace don't know how metadata displayed in related items list pulled items in list. i using dspace version 5.3 mirage 2 theme . edit based on schweerelos answer, below actual code. using custom metadata field dc.relation.languageversion . basically, want link other version instead of displaying value, display dc.language.iso of other version in item-view.xsl . i've incorporated answer of schweerelos question in code just displaying value of dc.relation.languageversion . sample values of dc.relation.languageversion 10665.1/9843 ; 10665.1/9844 ie not complete uri handle. thanks in advance! actual code <xsl:template name=...
Read more