add border to svg container in d3
in response to a question on stackoverflow
border is added in lines 55 - 62
add border to svg container in d3
in response to a question on stackoverflow
border is added in lines 55 - 62
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<head> | |
<style> | |
body { | |
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
margin: auto; | |
position: relative; | |
width: 960px; | |
} | |
text { | |
font: 10px sans-serif; | |
} | |
</style> | |
</head> | |
<body></body> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
//Width and height | |
var w = 800; | |
var h = 400; | |
var padding = 20; | |
var border=1; | |
var bordercolor='black'; | |
var dataset = [ | |
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],[-50,-100],[50,-45], | |
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],[-480, 90], [3,-90] | |
]; | |
// create scale functions | |
var xScale = d3.scale.linear() | |
.domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[0]; })]) | |
.range([padding, w - padding * 2]); | |
var yScale = d3.scale.linear() | |
.domain([d3.min(dataset, function(d) { return d[0]; }), d3.max(dataset, function(d) { return d[1]; })]) | |
.range([h - padding, padding]); | |
var rScale = d3.scale.linear() | |
.domain( [-100, d3.max(dataset, function(d) { return d[1]; })] ) | |
.range([2,5]); | |
//Create SVG element | |
var svg = d3.select("body") | |
.append("svg") | |
.attr("width", w) | |
.attr("height", h) | |
.attr("border",border) | |
; | |
var borderPath = svg.append("rect") | |
.attr("x", 0) | |
.attr("y", 0) | |
.attr("height", h) | |
.attr("width", w) | |
.style("stroke", bordercolor) | |
.style("fill", "none") | |
.style("stroke-width", border); | |
svg.selectAll("circle") | |
.data(dataset) | |
.enter() | |
.append("circle") | |
.attr("cx", function(d) { | |
return xScale(d[0]); | |
}) | |
.attr("cy", function(d) { | |
return yScale(d[1]); | |
}) | |
.attr("r", 3); | |
// scaled circles | |
//.attr("r", function(d) { | |
// return rScale(d[1]); | |
//}); | |
svg.selectAll("text") | |
.data(dataset) | |
.enter() | |
.append("text") | |
.text(function(d) { | |
return d[0] + "," + d[1]; | |
}) | |
.attr("x", function(d) { | |
return xScale(d[0]); | |
}) | |
.attr("y", function(d) { | |
return yScale(d[1]); | |
}) | |
.attr("font-family", "sans-serif") | |
.attr("font-size", "11px") | |
.attr("fill", "red"); | |
</script> |