Skip to content

Instantly share code, notes, and snippets.

@darthmall

darthmall/.block

Forked from jonasius/.block
Created April 7, 2018 13:47
Show Gist options
  • Save darthmall/67af79973350a3e3d605e199a7f2500c to your computer and use it in GitHub Desktop.
Save darthmall/67af79973350a3e3d605e199a7f2500c to your computer and use it in GitHub Desktop.
Download ZIP
nested data svg example
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<script>
var data_lowest = [
[{key:"Key1", values:["1a","1b","1c"]}],
[{key:"Key2", values:["2a","2b","2c"]}, {key:"Key21", values:["21a","21b","21c"]},{key:"Key22", values:["22a","22b","22c"]}],
[{key:"Key3", values:["3a","3b","3c"]}],
[{key:"Key4", values:["4a","4b","4c"]},{key:"Key41", values:["41a","41b","41c"]}]
];
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
// console.log(data_lowest);
var g = svg.selectAll("svg").data(data_lowest).enter()
g.selectAll("text").data(function(d) {return d}).enter()
.append("text")
.attr("x", 120)
// Here is the Problem. I don't now how to elegant move elements in y direction
// depending on previous elements. And also move following elements down.
.attr("y", function(d,i) {return 100+i*20;})
.text(function(d, i) {
console.log(i, d.values.toString());
return d.values.toString();
})
.attr("font-size", 24)
.attr("font-family", "monospace");
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment