Skip to content

Instantly share code, notes, and snippets.

@AndrewStaroscik

AndrewStaroscik/index.html

Last active August 29, 2015 14:11
Show Gist options
  • Save AndrewStaroscik/e394056440e603374404 to your computer and use it in GitHub Desktop.
Save AndrewStaroscik/e394056440e603374404 to your computer and use it in GitHub Desktop.
Download ZIP
Non-function nested D3 test
Raw
readme.md

Attempt to extend my previous D3 nested data example by passing in an array of object instead of series of number.

Currently not working.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<div id="vis"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var parentElement = [
{name: "Path 1", startX: 25, startY: 75, segments: [
{type: "line", val: 1},
{type: "line", val: 2},
{type: "line", val: 3},
{type: "line", val: 4},
{type: "line", val: 5},
{type: "line", val: 6},
{type: "line", val: 7},
{type: "line", val: 8},
{type: "line", val: 9}
]},
{name: "Path 2", startX: 25, startY: 125, segments: [
{type: "line", val: 1},
{type: "line", val: 2},
{type: "line", val: 3},
{type: "line", val: 4},
{type: "line", val: 5},
{type: "line", val: 6},
{type: "line", val: 7},
{type: "line", val: 8},
{type: "line", val: 9}
]},
];
var width = 500,
height = 200,
lineLength = 20;
var svg = d3.select("#vis").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.selectAll(".parent")
.data(parentElement);
var gEnter = g.enter()
.append("g")
.attr("class", "parent")
.attr('transform', function(d) { return 'translate(' + d.startX + ',' + d.startY + ')'; })
.style('fill', 'none')
.style('stroke', '#232323');
gEnter.selectAll(".child")
.data(function(d) {
console.dir(d.segments);
return d.segments; })
.enter()
.append(function(d) {
console.log(d.type);
return d.type;
})
.attr('class', 'child')
.attr('x1', function(d,i) { return lineLength * d.val; })
.attr('y1', 0)
.attr('x2', function(d,i) { return lineLength * (1 + d.val); })
.attr('y2', 0);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment