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 .
Related
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.
I'm using D3 v4 and I want to wrap text in a circle with D3plus.
I was trying two approaches but nothing worked for me.
First approach
I adopted the example from https://bl.ocks.org/davelandry/a39f0c3fc52804ee859a .
This is the essential part of my code:
<head>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://d3plus.org/js/d3plus.js"></script>
</head>
<body>
<div id="graphContainer" class="graphContainer">
<svg width="960" height="600"></svg>
</div>
<script>
d3.json('licenseSmall.json', function(error, graph) {
if (error) throw error;
var nodeContainer = svg.append("g")
.attr("class", "nodeContainer");
var node = nodeContainer.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "nodes")
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
var circle = node.append("circle")
.attr("r", 20)
.attr("fill", function(d) { return color(d.color); });
node.append("text")
.attr("id", "text")
.attr("dx", -10)
.attr("dy", ".35em")
.attr("test-anchor", "middle")
.text(function(d) { return getText(d) });
// Wrap text in a circle.
d3plus.textwrap()
.container(d3.select("#text"))
.draw();
});
</script>
</body>
With this code I get 2 errors:
TypeError: d3.scale is undefined
ReferenceError: d3plus is not defined
So it looks like d3plus is not working with D3 v4...
Then I found this post https://groups.google.com/forum/#!topic/d3plus/WN2Ruj3kjPA
and tried to take the example from the linked Github project d3plus-text (sorry, I've got not enough reputation to post the link).
So I changed my code:
old
<head>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="https://d3plus.org/js/d3plus.js"></script>
</head>
new
<head>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3plus.org/js/d3plus-text.v0.9.full.min.js"></script>
</head>
And in the script I just replaced
// Wrap text in a circle.
d3plus.textwrap()
.container(d3.select("#text"))
.draw();
with
new d3plus.TextBox()
.data(d3.select("#text").data())
.fontSize(16)
.width(200)
.x(function(d, i) { return i * 250; })
.render();
But actually nothing happens. The text looks the same as before.
And I get this error:
TypeError: t is undefined at d3.v4.min.js:4:27260
I have no idea how to adopt the example correctly. And I didn't find any other example on how to use d3plus.TextBox()
What I'm doing wrong?
use d3plus
d3plus.textwrap()
.container(d3.select("#your-div"))
.shape('circle')
.width(290)
.height(75)
.resize(true)
.draw();
I got it to work by using d3plus-text.Textbox()
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.
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 -------
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>