javascript - How to create SVG with grid lines using D3JS -


i planning build graph designed user drag drop. want add grid lines it. doing like:

var svg = d3.select("#canvas").append("svg")     .attr("width", width)     .attr("height", height);  (var = 0; <= 10; i++) {          svg.append("line")             .attr("x1", i*60)             .attr("y1", 0)             .attr("x2", i*60)             .attr("y2", 600)             .attr("stroke-width", 0.5)             .attr("stroke", "grey");         svg.append("line")             .attr("x1", 0)             .attr("y1", * 60)             .attr("x2", 600)             .attr("y2", * 60)             .attr("stroke-width", 0.5)             .attr("stroke", "grey");  } 

is there better way of doing this? also, except first , last lines in grid, other lines appearing thick.

https://jsfiddle.net/krishnasarma/rnyzkfrf/

any simple drag drop of image/object appreciated.

please see below code

index.html

   <!doctype html> <meta charset="utf-8"> <style>  body {     font: 12px arial; }  text.shadow {   stroke: #fff;   stroke-width: 2.5px;   opacity: 0.9; }  path {      stroke: steelblue;     stroke-width: 2;     fill: none; }  .axis path, .axis line {     fill: none;     stroke: grey;     stroke-width: 1;     shape-rendering: crispedges; }  .grid .tick {     stroke: lightgrey;     stroke-opacity: 0.7;     shape-rendering: crispedges; } .grid path {           stroke-width: 0; }  .area {     fill: lightsteelblue;       stroke-width: 0; }  </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script>  <script>  var margin = {top: 30, right: 20, bottom: 35, left: 50},     width = 600 - margin.left - margin.right,     height = 270 - margin.top - margin.bottom;  var parsedate = d3.time.format("%d-%b-%y").parse;  var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]);  var xaxis = d3.svg.axis()     .scale(x)     .orient("bottom")     .ticks(5);  var yaxis = d3.svg.axis()     .scale(y)     .orient("left")     .ticks(5);  var area = d3.svg.area()     .x(function(d) { return x(d.date); })     .y0(height)     .y1(function(d) { return y(d.close); });  var valueline = d3.svg.line()     .x(function(d) { return x(d.date); })     .y(function(d) { return y(d.close); });  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 + ")");  // function x grid lines function make_x_axis() {     return d3.svg.axis()         .scale(x)         .orient("bottom")         .ticks(5) }  // function y grid lines function make_y_axis() {   return d3.svg.axis()       .scale(y)       .orient("left")       .ticks(5) }  // data d3.csv("data.csv", function(error, data) {     data.foreach(function(d) {         d.date = parsedate(d.date);         d.close = +d.close;     });      // scale range of data     x.domain(d3.extent(data, function(d) { return d.date; }));     y.domain([0, d3.max(data, function(d) { return d.close; })]);      // add filled area     svg.append("path")         .datum(data)         .attr("class", "area")         .attr("d", area);      // draw x grid lines     svg.append("g")         .attr("class", "grid")         .attr("transform", "translate(0," + height + ")")         .call(make_x_axis()             .ticksize(-height, 0, 0)             .tickformat("")         )      // draw y grid lines     svg.append("g")                     .attr("class", "grid")         .call(make_y_axis()             .ticksize(-width, 0, 0)             .tickformat("")         )      // add valueline path.     svg.append("path")         .attr("d", valueline(data));      // add x axis     svg.append("g")         .attr("class", "x axis")         .attr("transform", "translate(0," + height + ")")         .call(xaxis);      // add y axis     svg.append("g")         .attr("class", "y axis")         .call(yaxis);      // add text label x axis     svg.append("text")         .attr("transform",               "translate(" + (width/2) + " ," +                               (height+margin.bottom) + ")")         .style("text-anchor", "middle")         .text("date");      // add white background y axis label legibility     svg.append("text")         .attr("transform", "rotate(-90)")         .attr("y", 6)         .attr("x", margin.top - (height / 2))         .attr("dy", ".71em")         .style("text-anchor", "end")         .attr("class", "shadow")         .text("price ($)");      // add text label y axis     svg.append("text")         .attr("transform", "rotate(-90)")         .attr("y", 6)         .attr("x", margin.top - (height / 2))         .attr("dy", ".71em")         .style("text-anchor", "end")         .text("price ($)");      // add title     svg.append("text")         .attr("x", (width / 2))              .attr("y", 0 - (margin.top / 2))         .attr("text-anchor", "middle")         .style("font-size", "16px")         .style("text-decoration", "underline")         .text("price vs date graph");  });  </script> </body> 

data.csv

date,close 1-may-12,58.13 30-apr-12,53.98 27-apr-12,67.00 26-apr-12,89.70 25-apr-12,99.00 24-apr-12,130.28 23-apr-12,166.70 20-apr-12,234.98 19-apr-12,345.44 18-apr-12,443.34 17-apr-12,543.70 16-apr-12,580.13 13-apr-12,605.23 12-apr-12,622.77 11-apr-12,626.20 10-apr-12,628.44 9-apr-12,636.23 5-apr-12,633.68 4-apr-12,624.31 3-apr-12,629.32 2-apr-12,618.63 30-mar-12,599.55 29-mar-12,609.86 28-mar-12,617.62 27-mar-12,614.48 26-mar-12,606.98 d3noob’s block #e1aa 

Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -