sadet48 - d3js scalingLinear method


	sadet48


	d3js scalingLinear method

d3js scalingLinear method

<!DOCTYPE html>
<html>
<head>
	<title>d3js scalingLinear method</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<style type="text/css">
*{margin:0;padding:0}
main {border-bottom:1px solid #f7f7f7;}
main h1{padding:10px;background:#33ffff}
main p {font-family: Tahoma;color: red;font-size:22px;padding:5px;}
svg {border: 1px solid #ddd;margin: 5px}
</style>
</head>
<body>
	<main>
		<p>d3js scalingLinear method</p>
		<div class="graphContainer"></div>
	</main>
<script>
var data = [10,20,15,40,35],
    width = 120,
    barHeight = 20,
    margin = 1;

var scale = d3.scaleLinear()
                 .domain([d3.min(data), d3.max(data)])
                 .range([10, 40]);

var svg = d3.select(".graphContainer")
                  .append("svg")
                  .attr("width", width)
                  .attr("height", barHeight * data.length);

var g = svg.selectAll("g")
                  .data(data)
                  .enter()
                  .append("g")
                  .attr("transform", function (d, i) {
                      return "translate(0," + i * barHeight + ")";
                  });

g.append("rect")
       .attr("width", function (d) {
           return scale(d);
       })
       .attr('style', "color:green")
       .attr("height", barHeight - margin)
       .style('fill', 'green');

g.append("text")
       .attr("x", function (d) { return (scale(d)); })
       .attr("y", barHeight / 2)
       .attr("dy", "6px")
       .style("font-size", "18px")
       .text(function (d) { return d; });

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

Toplam 109757 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