HEEELP E PLEEASE! :)

45 views

Skip to first unread message

Rodrigo Luna

unread,

Sep 11, 2016, 9:55:08 AM9/11/16

to d3-js

Hi.

Some body help me?

Could you tell me why after declrar the variables "x " and "y", the tags " svg " and all that follows it along the code no longer appears in the inspector my web browser?

When I remove the variables just mentioned , the " svg " tag and its " id = bar" atributes appear correctly with all that follows in the code.

------------- the code: ------------

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->

<script src="./scripts/d3/d3.min.js"></script>

<script type="./scripts/d3js.js"></script>

<link rel="stylesheet" type="text/css" href="./styles/d3css.css">

<title>d3</title>

</head>

<body>

<script type="text/javascript">

var data = [213,20,60,232,150,74,110,39];

var w = 1000;

var h = 500;

var x = d3.scale.linear()

	.domain([0, data.length])  

	.range([0,w]);

var y = d3.scale.linear()

	.domain([0, d3.max(data)])  

	.range([0,h]);

var svg = d3.select("body").append("svg")

	.attr("id", "chart")

	.attr("width", w)

	.attr("height", h);

svg.selectAll(".bar")

	.data(data)

	.enter()

	.append("rect")

	.attr("class", "bar")

	.attr("x", function(d,i){

		return i * 40;

})

	.attr("y", 0)

	.attr("width", 39)

	.attr("height", function(d,i){

		return y(d);

})

</script>

</body>

</html>

------------ THAK YOU / Greetings from Mexico City -------

Curran

unread,

Sep 12, 2016, 9:47:49 AM9/12/16

to d3-js

Hola Rodrigo,

Probably what is happening is that the statement

var x = d3.scale.linear()

.domain([0, data.length])

.range([0,w]);

is throwing an error, so the rest of the code does not execute (therefore the SVG never gets created). Please take a look "console" tab of the browser debugging tools. There you should see an error.

The reason for the error is that you are using the D3 version 3 scales API, but you are including the D3 version 4 script. The scale declaration API has changed in version 4 to the following:

var x = d3.scaleLinear()

.domain([0, data.length])

.range([0,w]);

So, if you go through your code and make sure that all instances of "scale.linear" get replaced with "scaleLinear", everything should work.

Good luck!

Best regards,

Curran

Reply all

Reply to author

Forward

0 new messages