Could you tell me why after declare the variables x and y, the <svg> tag and all that follows no longer appears in the inspector of my web browser? When I remove the variables just mentioned the <svg> tag and its id = bar atribute appears correctly as does all the following 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>
You are using D3 v4.x. in that version, there is no scale.linear(). Instead of that, it should be:
var x = d3.scaleLinear()
And the same for the var y.
As this line comes before your var svg (which appends the SVG element), it throws an error and the SVG tag is never created. Look at the console and you'll see the error.
Related
With d3js v.4 I am able to rotate a rect around it's center. I've wrestled with doing this same effect using d3js v. 7 (or v5 and v6) to no avail. Can anyone show me in v.7 how to achieve what I'm doing with v.4 (code below)?
Sorry for not providing a jsFiddle. I've not practiced with it yet. But if you know d3js the following html page can be easily run locally if you have a simple server (such as VSCode LiveServer). Thanks for reading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Rotation behaves differently depending on d3js version -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
<title>Works in D3.v4 but not D3.v5 or later</title>
<style>
svg {
background:green;
}
svg rect {
fill:purple
}
</style>
</head>
<body>
<script>
const svg = d3.select('body')
.append('svg')
.attr("height", 400)
.attr("width", 400);
const squareSize = 200;
const group = svg.append("g")
.attr("transform", "translate(200, 200)");
group.append("rect")
.attr("width", squareSize)
.attr("height", squareSize)
.transition()
.duration(8000)
.attr("transform", "rotate(180)")
.attr("y", -squareSize/2)
.attr("x", -squareSize/2);
</script>
</body>
</html>
I'm dragging a single rectangle ... it drags correctly the first time, but the second time it jumps back to its starting point at the start of the drag.
I notice many drag examples on the net drag circles, where there is a fortunate correspondance between the point and the cx, cy. But with a rectangle there is an offset, which looks like it is supposed to be handled using the objects data. But I'm not sure exactly how.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
svg {
background-color: linen;
}
</style>
</head>
<body>
<svg id="svgc" width="450" height="450">
</svg>
<script>
d3.select("#svgc").selectAll("rect")
.data([{x: 100, y:200}])
.enter()
.append("rect")
.attr("x",function(d) {return d.x; })
.attr("y",function(d) {return d.y; })
.attr("width",40)
.attr("height",80)
.attr("fill","steelblue");
makeDragDrop();
function makeDragDrop() {
var widget=undefined, color=undefined;
var dragR=d3.drag()
.on("start", function() {
color=d3.select(this).attr("fill");
widget=d3.select(this).attr("fill","lime");
})
.on("drag", function(d) {
d3.select(this)
.attr("x",d3.event.x)
.attr("y",d3.event.y);
})
.on("end", function() {
widget.attr("fill",color);
widget=undefined;
})
dragR(d3.select("#svgc").selectAll("rect"));
}
</script>
</body>
</html>
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 -------
This doesn't work offline, it works just fine when internet connection is available :
<!doctype html>
<html>
<head>
<title>d3 SVG barchart</title>
<script src="http://d3js.org/d3.v3.min.js"></script><!--Line A-->
<script src="d3.js"></script>
<script src="d3.min.js"></script>
</head>
<body>
<script>
var dataArray = [20, 40, 50, 60];
var width=500;
var height=500;
var canvas = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var widthScale = d3.scale.linear()
.domain([0, 60])
.range([0, width]);
var bars = canvas.selectAll("rect")
.data(dataArray)
.enter()
.append("rect")
.attr("width", function(d){
return widthScale(d);
})
.attr("height", 50)
.attr("y", function(d, i){
return i*100;
});
</script>
</body>
</html>
It seems like the scale operation(s) of d3.js library doesn't work when I'm offline (or when Line A in is put in a comment block), why? Is there any d3.js version that works for offline user?
I enjoy snap.svg practices offline (I don't have private internet connection available), is there any way to do this with d3.js?
Your problem is here
<script src="http://d3js.org/d3.v3.min.js"></script><!--Line A-->
<script src="d3.js"></script>
<script src="d3.min.js"></script>
Download
<script src="http://d3js.org/d3.v3.min.js"></script>
Refer correctly to it locally and remove:
<script src="d3.js"></script>
<script src="d3.min.js"></script>
1.download and add d3.v3.min.js in asset folder
2.remove
<script src="http://d3js.org/d3.v3.min.js"></script><!--Line A-->
<script src="d3.js"></script>
<script src="d3.min.js"></script>
3.add
<script src="d3.v3.min.js"></script>
then d3 graph will work in offline .
I am new to D3. I make a chart with five bubbles, in wich "r" attributes are defined through a JSON member called "estudiantes". In the same chart there is a button. I am trying to make that when someone click in the button the "r" attribute change and be defined by other JSON member called estudiantes2010, but it don't work. If I use a fixed value for "r", the animation work and the radius of the bubbles change, so I guess that I am doing something wrong binding the JSON object to the r attribute, but I don't know what. Thanks!
Following is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="data/carreras.json"></script>
</head>
<body>
<script type="text/javascript">
var w = 2000;
var h = 500;
var SVG = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var circulos = SVG.selectAll("circle")
.data(jsonCarreras2002)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", function(d) {return Math.sqrt(d.estudiantes/20);})
.attr("cx", function(d, i){return 30+(i*140+170)})
.attr("cy", 250);
var button = d3.select("body")
.append("input")
.attr("type","button")
.attr("value", "A button");
button.on("click", function() {
circulos.transition()
.attr("r", function(d) {return Math.sqrt(d.estudiantes2010/20);})
});
</script>
</body>
</html>
the json file is :
var jsonCarreras2002 = [
{ "nombre": "Artes y Humanidades",
"estudiantes": 29410,
"estudiantes2010": 38767,
"prueba": 20},
{ "nombre": "CC. Sociales y jurÃdicas",
"estudiantes": 147482,
"estudiantes2010": 140613,
"prueba": 20},
{ "nombre": "Ciencias",
"estudiantes": 18510,
"estudiantes2010": 20189,
"prueba": 20},
{ "nombre": "CC. De la Salud",
"estudiantes": 22238,
"estudiantes2010": 44636,
"prueba": 20},
{ "nombre": "IngenierÃa y Arquitectura",
"estudiantes": 75947,
"estudiantes20103": 59772,
"prueba": 20}];
First, I think you have a typo in json, the line before the last, estudiantes20103 should be I guess estudiantes2010
Take a look at this example that I made based on yours. At the bottom I added one more button, that sets constant value for all circles, just for fun.
Play a little bit with buttons, you will see that both work. You can create more buttons if you wish to test more thoroughly.
Then just see what was wrong with your example, but in any case you have a working solution.
One difference is that I encapsulated data definition in function getData(), try that too.
If you have time, you can perhaps take a look at additional useful and even more complicated, but also beautiful example in this question.