milkbread · July 1, 2013 16:41
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!--Source: http://www.dashingd3js.com/svg-paths-and-d3js-->
 <html>
 <head>
  <title>Testing d3.svg.line()</title>
  <meta charset="utf-8" />
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style>
  </style>
 </head>
 <body>
  <div id='lineTest'></div>
  <svg width="100" height="100">
  <path d=" M 10 25
            L 10 75 
            L 60 75
            L 10 25"
            stroke="red" stroke-width="2" fill="none" />
 </svg>
  <script>
 //The data for our line
 var lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                 { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                 { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

 //This is the accessor function we talked about above
 var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("basis");

 //The SVG Container
 var svgContainer = d3.select("#lineTest").append("svg")
                                    .attr("width", 200)
                                    .attr("height", 200);

 //The line SVG Path we draw
 var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");

 //...and this is the stuff for a nice selector, that shows us all possible 'interpolation' modi
 var sorted_names = ['linear','step-before','step-after','basis','basis-open','basis-closed','bundle','cardinal','cardinal','cardinal-closed','monotone'];
 var unit_selector = d3.select('#lineTest').append("form").attr("name","unit_form").append("select").attr("name","unit_sel").attr("onChange","changedSelektor(value)").attr("size","3");
 //unit_selector.selectAll("option").remove();
 unit_selector.selectAll("option").data(sorted_names).enter().append("option").attr("value",function(d){return d}).text(function(d,i){return d});
 var text = d3.select('#lineTest').append('text').text('basis');

 function changedSelektor(value){
  console.log(value)
  lineFunction.interpolate(value);
  lineGraph.attr("d", lineFunction(lineData));
  text.text(value);
 }

  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<!--Source: http://www.dashingd3js.com/svg-paths-and-d3js-->
	<html>
	<head>
	<title>Testing d3.svg.line()</title>
	<meta charset="utf-8" />
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>
	</style>
	</head>
	<body>
	<div id='lineTest'></div>
	<svg width="100" height="100">
	<path d=" M 10 25
	L 10 75
	L 60 75
	L 10 25"
	stroke="red" stroke-width="2" fill="none" />
	</svg>
	<script>
	//The data for our line
	var lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20},
	{ "x": 40, "y": 10}, { "x": 60, "y": 40},
	{ "x": 80, "y": 5}, { "x": 100, "y": 60}];

	//This is the accessor function we talked about above
	var lineFunction = d3.svg.line()
	.x(function(d) { return d.x; })
	.y(function(d) { return d.y; })
	.interpolate("basis");

	//The SVG Container
	var svgContainer = d3.select("#lineTest").append("svg")
	.attr("width", 200)
	.attr("height", 200);

	//The line SVG Path we draw
	var lineGraph = svgContainer.append("path")
	.attr("d", lineFunction(lineData))
	.attr("stroke", "blue")
	.attr("stroke-width", 2)
	.attr("fill", "none");

	//...and this is the stuff for a nice selector, that shows us all possible 'interpolation' modi
	var sorted_names = ['linear','step-before','step-after','basis','basis-open','basis-closed','bundle','cardinal','cardinal','cardinal-closed','monotone'];
	var unit_selector = d3.select('#lineTest').append("form").attr("name","unit_form").append("select").attr("name","unit_sel").attr("onChange","changedSelektor(value)").attr("size","3");
	//unit_selector.selectAll("option").remove();
	unit_selector.selectAll("option").data(sorted_names).enter().append("option").attr("value",function(d){return d}).text(function(d,i){return d});
	var text = d3.select('#lineTest').append('text').text('basis');

	function changedSelektor(value){
	console.log(value)
	lineFunction.interpolate(value);
	lineGraph.attr("d", lineFunction(lineData));
	text.text(value);
	}

	</script>
	</body>
	</html>