I followed this instruction, entering the complete code into the HTML pane of web-maker:
<!doctype html>
<html>
<head>
<title>D3 tutorial</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!--<script src="d3.min.js"></script>-->
</head>
<body>
<script>
var canvas = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 500);
var circle = canvas.append("circle")
.attr("cx",250)
.attr("cy", 250)
.attr("r", 50)
.attr("fill", "red");
</script>
</body>
</html>
That results in an empty page.
The I moved the script "content" to the JS pane, that results in "ReferenceError: d3 is not defined".
The script content will move to the JS pane. But the external scripts need to be loaded through the "Add library" button. In the "Add library" box, simply select D3 from the list of popular libraries.
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>
d3 loaded external svg which contains closed paths,Code is highlighting green fill only once per each path from the refresh. Is it possible to make green fills for all the mouseovers.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./d3.min.js"></script>
<title>svg and d3</title>
</head>
<body>
<script type="text/javascript">
d3.xml("t.svg")
.mimeType("image/svg+xml")
.get(function(error, xml) {
if (error) throw error;
document.body.appendChild(xml.documentElement);
d3.selectAll('path.tel')
.on("mouseover", function(d) {
d3.select(this).style("fill", "green");
})
.on("mouseout", function(d) {
d3.select(this).style("fill", "none");
});
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<title>Transitions Tutorial</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<script>
d3.json("myData.json",function(data){
var canvas= d3.select("body").append("svg")
.attr("width",500)
.attr("height",500);
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width",function(d){return d.age*10;})
.attr("height",48)
.attr("y",function(d,i){ i*48;})
.attr("fill","blue");
})
//console.log(d3);
</script>
</body>
</html>
the following html is to extract data from json file myData.json
I am getting this error message :"Failed to load file:///D:/Java/D3_DEMO/myData.json: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."
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'm trying to start with d3 but have bad exp. :)
I can't make a simple example run localy. I'm runing it under chrome with webstorm local server;
http://localhost:63342/svg-tests/index.html
There are no errors but no red circles are drawen. And "console.log(d);" is not fired;
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script src="js/d3.v3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script>
var dataSet = [10, 20, 30, 40];
var svg = d3.select('svg');
var circle = svg.selectAll('circle')
.data(dataSet)
.enter()
.append('circle')
.attr({
r: function(d){ console.log(d); return d },
cx: 10,
cy: 10,
fill: 'red'
});
</script>
<svg></svg>
</body>
</html>
Please help!?
You just need to define the <svg> element before the script as it relies on it:
<svg></svg>
<script>
...
</script>