In this jsbin I'm using cdn to get d3 version 3 to display a rect but it only shows using the html svg tags but with D3. What am I missing? Thank you.
Here is the html mark up for the rect using d3.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Drawing SVG Shapes with D3</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
</head>
<body>
<h3>SVG Bar</h3>
<svg>
<rect width="50" height="200" style="fill:blue"/>
</svg>
<h3>D3 Bar</h3>
<script>
d3.select("body")
.append("svg")
.append("rect")
.attr("widt",50)
.attr("height",200)
.style("fill","blue");
</script>
</body>
</html>
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>
Trying to create simple svg canvas using D3 but looking at elements in the console nothing shows up. D3 seems to be loading because from the console when I type d3. I get the options and methods available in D3. But the svg canvas is not being drawn. What am I missing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bar Chart</title>
<style>
</style>
</head>
<body>
<div id="chart"></div>
<script src="d3.v3.js">
var w = 500;
var h = 500;
function drawSVG(s) {
var svg = d3.select("#chart")
.append("svg")
.attr("width",w)
.attr("height",h);
console.log(s);
}
var sampleStr = "hello";
drawSVG(sampleStr);
</script>
</body>
</html>
You've placed your code within the script tag that has its source attribute set to download D3:
<script src="d3.v3.js">
... your code is here
</script>
You need to place your code in its own script tag:
<script src="d3.v3.js"></script>
<script>
... your code should go here
</script>
I am learning D3.js, and I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Graphic</title>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</body>
</html>
I am using Chrome as a browser on my mac. Am I making an obvious mistake? Thank you!
There is nothing really wrong per-se with your code, other than the fact that it will do nothing (and I personally would put the 'script src' tag in the head section). You have simply written a HTML document which then loads in the D3.JS Javascript library.
What you now need to do is start using the library by issuing some D3 commands to create HTML/DOM elements from data. There is plenty to read up on the internet (try dashingd3js.com) but to get you started here is a v.simple starter for 10 expanding on your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Column Chart</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="chartarea"></div>
<script type="text/javascript">
// Some random data
var data = [0.27, 0.5, 0.1, 0.15, 0.3, 0.21, 0.25, 0.94, 0.04, 1.00];
var svg = d3.select('#chartarea')
.selectAll('div')
.data(data)
.enter()
.append('div')
.attr('class', 'bar')
.style('height', function (d) {
return d * 400 + 'px';
});
</script>
</body>
</html>
The above should create a v.simple column chart using HTML DIV's. You can then move on to more advanced implementations to generate SVG components.
Also see example here:
http://bl.ocks.org/jamesleesaunders/260cf482c8a56d49dfa6
I am trying to setup a D3 project and I want to color the visBdy div at the start. But the selection doesnt seem to be grabbing the visBdy div, it grabs html, even if I spell it wrong.It steps through the code and I do get the var, its just wrong (I think) Must be something simple....
setup();
function setup() {
var bd = d3.select(".visBdy");
bd.style("color", "red");
bd.style("background-color", "green");
}
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CCC</title>
<link href="css/vis.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/app.js"></script>
<div class="visMnu">XXX</div>
<div class="visBdy">XXX</div>
</body>
</html>
I am trying to get the size of my image in IE9. I did it with success (tried on jpg). When I try loading an image whose width is lower than the height, there is no problem at all. But when I try to upload an image with a width higher than the height, I see that the lines that output "vh:", "vw:" return zero.
Why is there a problem when trying to load an image (by my code) with width > height?
Thanks.
Here is my code (Works for IE9 - That's what I want to check out).
<!doctype html>
<html>
<head>
<!-- <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
var v=new Image();
if (navigator.appName === "Microsoft Internet Explorer") {
return function () {
alert("file." + document.getElementById("id_filepic").value);
$("#id_image").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)");
//$("#id_image").attr("src", document.getElementById("id_filepic").value);
//v.src = document.getElementById("id_filepic").value;
v.src = $("#id_filepic").val();
alert("vw:" + v.width);
alert("vh:" + v.height);
$("#id_image").width(v.width);
$("#id_image").height(v.height);
document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("id_filepic").value;
alert("w final:" + $("#id_image").width());
alert("h final:" + $("#id_image").height());
}
}
})();
</script>
<style type="text/css"></style>
</head>
<body>
<form name="uploadForm">
<p><input id="id_filepic" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
</form>
<image id="id_image" src="" onmousedown="return false"></image>
</body>
Consider this issue as closed, since I found solution on: The event after loading image on IE9
Thanks, anyway :)