https://www.dashingd3js.com/dynamic-svg-coordinate-space
Three SVG Rectangle Example.
So all based on absolute data rather than calculated values but it seems to work:
Code below generates:
<!DOCTYPE html>
<html>
<head>
<title> Line representation of CD40</title>
<script src=http://d3js.org/d3.v3.min.js></script>
</head>
<body>
<h2> Three rectanges </h2>
<script>
var CD40 = [173,22,62];
var EC = 173
var TM = 22
var cyto=62
var fulllength = 257
var ecandtm = 195
var jsonRectangles = [
{ "x_axis": 10, "y_axis": 10, "height": EC, "width":20, "color" : "green" },
{ "x_axis": 10, "y_axis": EC, "height": TM, "width":20, "color" : "purple" },
{ "x_axis": 10, "y_axis": ecandtm, "height": cyto, "width":20, "color" : "red" }];
var svgContainer = d3.select("body").append("svg")
.attr("width", 100)
.attr("height", 500);
var rectangles = svgContainer.selectAll("rect")
.data(jsonRectangles)
.enter()
.append("rect");
var rectangleAttributes = rectangles
.attr("x", function (d) { return d.x_axis; })
.attr("y", function (d) { return d.y_axis; })
.attr("height", function (d) { return d.height; })
.attr("width", function (d) { return d.width; })
.style("fill", function(d) { return d.color; });
</script>
</body>
</html>
No comments:
Post a Comment