Dynamic property text offset

[Auricopter]

I fixed the following locally:

• Added dynamic to property text offset. No longer affected by property id, which resulted in undesired empty spaces. Instead affected by order in which the checkboxes are selected. (see code snippet below. refer to "visiblePropertiesCounter").
• Added property labels to graph.

function display_prop(prop) {
	var prop_id = prop.id;
	var prop_id_nb = prop.getAttribute('id_nb');
	var text_base_offset = 10;
	var text_offset = 10;
	var prop_name = prop_id.slice(prop_id.indexOf("_") + 1);
	var item = prop_id.slice(0, prop_id.indexOf("_"));
	console.log(prop_id, item)
	if (d3.select("#" + prop_id).property("checked")) {
		visiblePropertiesCounter++;
		if (item == 'nodes') {
			var elements_text = d3.selectAll('.node');
		} else if (item == 'edges') {
			var elements_text = d3.selectAll('.edgelabel');
		}
		attach_property(elements_text, prop_name, prop_id_nb, item)
	}
	else {
		visiblePropertiesCounter--;
		if (item == 'nodes') {
			d3.selectAll('.node').select('.' + prop_id).remove();
		}
		else if (item == 'edges') {
			d3.selectAll('.edgelabel').select('.' + prop_id).remove();
		}

	}
}


function attach_property(graph_objects, prop_name, prop_id_nb, item) {
	var text_base_offset = 0;
	var text_offset = 0;
	var prop_id = item + "_" + prop_name;
	if (item == 'nodes') {
		elements_text = graph_objects.append("text").style("pointer-events", "none");
	}
	else if (item == 'edges') {
		var elements_text = graph_objects.append("textPath")
			.attr('class', 'edge_text')
			.attr('href', function (d, i) { return '#edgepath' + d.id })
			.style("text-anchor", "middle")
			.style("pointer-events", "none")
			.attr("startOffset", "70%");
		//.text(function (d) {return d.label});
		prop_id_nb = prop_id_nb + 1;
	}
	else {
		console.log('Bad item name.'); return 1;
	}
	elements_text.classed("prop_details", true).classed(prop_id, true)
		// .attr("x", 12)
		// .attr("dy", function (d) { return graphShapes.node_size(d) + text_base_offset + text_offset * parseInt(prop_id_nb); })
		// .attr("y", ".31em")
		.attr("dy", function (d) { return graphShapes.node_size(d) + text_base_offset + text_offset + visiblePropertiesCounter*10; })
		.text(function (d) { return "| " + prop_name + ": " + get_prop_value(d, prop_name, item); });
}