
	sadet48


	d3js svg line path

d3js svg line path

<!DOCTYPE html>
<html>
<head>
  <title></title>
<script src="http://d3js.org/d3.v3.min.js"></script>  
<style type="text/css">
*{margin: 0;padding: 0} 
h1{
font-family: Tahoma;color: red;font-size: 22px;padding: 7px 10px 5px 10px;
}
svg {
  border: 1px solid #ccc;
  margin: 10px;
}
.line {
  fill: none;
  stroke: #000;
  stroke-width: 2px;
}
</style>
<body>
<main>
<h1>d3js svg line path</h1>
<div class="lineContainer"></div>
</main>
<script>

var w = 200,
    h = 100;

var svg = d3.select('.lineContainer').append('svg');
    svg.attr('width', w);
    svg.attr('height', h);

var lineFunction = d3.svg.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .interpolate('linear');

var lineData = [ 
{"x": 0,"y":30},
{"x": 30,"y":0},
{"x": 60,"y":30},
{"x": 90,"y":0},
{"x": 120,"y":30}, 
{"x": 150,"y":0}   
];
  
var lineGraph = svg.append("path")
  .attr("d", lineFunction(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");
</script>
</body>
</html>

Toplam 109791 ziyaretçi

sadet48

JQuery Cycle ile Haber Bandı

Sadet Sevinç

sadet48.tr.gg@gmail.com

Facebook beğen

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol