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
Post a Comment