I currently have the following html.
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
</script>
</head>
<body>
<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>
</body>
</html>
For some odd reason when I open the html. I don't get the simple results I expect. Anyone have idea why?
The problem is that the script is running before the dom is loaded. There are a couple of fixes, the simplest being to move the script to the end of the body.
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>
<script>
var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
</script>
</body>
</html>
http://jsfiddle.net/46r21pn1/
Related
I'm new to D3 and I need help with one task. When you click a button only text is overwritten but I want to remove all the children of the group with certain id and fill it with children of #refresh.
<?xml version="1.0"?>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style>
body {
background-color: #000000;
}</style>
</head>
<body>
<button onclick="refreshSvgElement('#c3a4ca3d-da2d-4b94-9a35-1088ba0cac19')">Change</button>
<svg id="refresh">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">BLUE</text>
</svg>
<svg id="main_window" position="fixed" width="100%" height="100%" viewBox="0 0 8074 4098">
<g>
<g id="c3a4ca3d-da2d-4b94-9a35-1088ba0cac19">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">RED</text>
</g>
</g>
</svg>
</body>
</html>
<script src="https://d3js.org/d3.v3.js"> </script>
<script>
function refreshSvgElement(id) {
var refreshElement = d3.select("#refresh");
var selection = d3.select(id)
.select("text")
<!-- .remove() -->
<!-- .append("text") -->
.text(refreshElement.text());
}
</script>
This is how I would do it. Store selection as a var, then select all current text and use .remove(), then append new text.
<?xml version="1.0"?>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style>
body {
background-color: white;
}</style>
</head>
<body>
<button onclick="refreshSvgElement('#c3a4ca3d-da2d-4b94-9a35-1088ba0cac19')">Change</button>
<svg id="refresh">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">BLUE</text>
</svg>
<svg id="main_window" position="fixed" width="100%" height="100%" viewBox="0 0 8074 4098">
<g>
<g id="c3a4ca3d-da2d-4b94-9a35-1088ba0cac19">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">RED</text>
</g>
</g>
</svg>
</body>
</html>
<script src="https://d3js.org/d3.v3.js"> </script>
<script>
function refreshSvgElement(id) {
var refreshElement = d3.select("#refresh");
console.log(refreshElement.text())
var selection = d3.select(id)
selection.selectAll("text").remove();
selection.append("text").text(refreshElement.text()).attr("x", "0.5").attr("y", "50");
}
</script>
I'm trying to add a background image to a svg circle. Below I show both versions but I commented out the part that works. I'm trying to use D3 to create the same elements on the page. When checking the console the circle svg shows up but no image.
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
stroke: 1;
}
</style>
<body>
<script type="text/javascript" src="d3.min.js"></script>
<!--
<svg height="500" width="800">
<defs>
<pattern id="apple" height="100%" width="100%"
patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRation="none"
xlink:href="apple.jpeg"></image>
</pattern>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#apple)" />
</svg>
-->
<script>
// now trying to add same image inside a circle using D3
var svg = d3.select("body")
.append("svg")
.attr("height",500)
.attr("width",800);
var defs = svg.append("defs")
.append("pattern")
.attr("id", "apple")
.attr("height","100%")
.attr("width", "100%")
.attr("patternContenUnits", "objectBoundingBox")
.append("image")
.attr("height",1)
.attr("width",1)
.attr("preserveAspectRatio","none")
.attr("xlink:href","apple.jpeg");
var circle = svg.append("circle")
.attr("cx",50)
.attr("cy",50)
.attr("r",40)
.attr("fill","url(#apple)");
</script>
</body>
</html>
I practice use d3 to drag svg circle around.
It works except following error appeared in console:
"Uncaught TypeError: a.target.className.indexOf is not a function"
What is wrong with my code? Following is my code:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<title></title>
<meta charset="UTF-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<p>
<svg width="300" height="200">
<circle cx="100" cy="100" r="5" fill="red" />
<circle cx="50" cy="70" r="5" fill="red" />
</svg>
</p>
<script>
var drag = d3.behavior.drag()
.on("drag", function () {
d3.select(this).attr("cx", d3.event.x)
.attr("cy",d3.event.y);
});
d3.selectAll('circle').call(drag);
</script>
</body>
</html>
This is because of Google Translate extension. Disabling it solves the problem.
The object doesn't contain that method. This will "shim" it.
SVGAnimatedString.prototype.indexOf = function () { return this.baseVal.indexOf.apply(this.baseVal, arguments); }
i use innerHTML to add svg element,it works fine in chrome but in firefox it can not display; thanks so much for any ansower
<!DOCTYPE html>
<html>
<head>
<title>SVGInnerHTML demo</title>
<meta charset="utf-8" />
<script src="svginnerhtml.js"></script>
<script>
alter = function () {
var svg = document.getElementById('container');
svg.innerHTML = '<rect width="100" height="60" fill="green" />'
+ '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
+ '<text x="15" y="20" fill="white">hello world</text>'
+ '<g transform="translate(0, 70)"><rect width="100" height="20" fill="yellow" /></g>';
}
</script>
</head>
<body>
<svg id="container" width="100px" height="100px" http://www.w3.org/2000/svg>
</svg>
<p>
<button onclick="alter()">set .innerHTML</button>
<button onclick="alert(document.getElementById('container').innerHTML)">get .innerHTML</button>
</p>
</body>
</html>
A workaround is to add the innerHTML code as HTML, and not SVG. You can do that simply by using a <div> (instead of <svg>) in your HTML code as the placeholder, and insert the full SVG via innerHTML.
Replace:
<svg id="container" width="100px" height="100px">
</svg>
with
<div id="container" style="width: 100px; height: 100px">
</div>
And wrap your innerHTML string within an <svg> element:
var svg = document.getElementById('container');
svg.innerHTML = '<svg><rect width="100" height="60" fill="green" />'
+ '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
+ '<text x="15" y="20" fill="white">hello world</text>'
+ '<g transform="translate(0, 70)">'
+ '<rect width="100" height="20" fill="yellow" /></g></svg>';
This should work in both Chrome and Firefox. Here's a JSFiddle.
I've been using the jQuery.svg plugin to do some SVG rendering and it works perfectly but I also want to have the server render some SVG into the page and I can't get that to work. How do I add some SVG like below into the page so that Firefox will render it?
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div class="map editable" id="map_1"><svg height="600" version="1.1" width="600" xmlns="http://www.w3.org/2000/svg"><image height="600" href="/system/graphics/1/original/floor-plan-large.gif" width="500" x="0" y="0" /><circle cx="300" cy="580" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="300" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="400" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="260" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><circle cx="140" cy="340" fill="red" r="5" stroke-width="2" stroke="red" /><polyline fill="none" points="300,580 300,400 260,400 260,340 140,340" stroke-width="3" stroke="blue" /></svg></div>
<svg version="1.1" baseProfile="full" width="300px" height="200px" xmlns="http://www.w3.org/2000/svg">
<circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg>
<svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
<svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg:svg>
</body>
</html>
Do I need a meta tag saying that there is SVG content in the page or define the SVG namespace somehow?
See this link (SVG in HTML introduction # Mozilla Developer Center).
An inline SVG example can be seen here.
In 2020, using SVG in html or xhtml is now possible in all browsers.
Example of HTML / SVG(2.0) code that I use
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns:svg="http://www.w3.org/2000/svg">
<head> <title>SVG within XHTML Demo</title> </head>
<body>
<p>
<b>Electricity Plan</b>
</p>
<svg xmlns='http://www.w3.org/2000/svg' version='2.0' width='8000px' height='6000px'>
<defs>
<g id="prise">
<line x1="0" y1="0" x2="20" y2="0" stroke="blue"/>
<line x1="20" y1="-15" x2="20" y2="15" stroke="blue"/>
<path d="m40,-20 a20,20 0 0,0 0,40" fill="none" stroke="blue"/>
<line x1="40" y1="-20" x2="40" y2="-28" stroke="blue"/>
<line x1="40" y1="20" x2="40" y2="28" stroke="blue"/>
</g>
</defs>
<line x1='100' y1='50' x2='140' y2='50' stroke='blue'/>
<use href='#prise' x='140' y='50'/>
</svg>
</body>
</html>
What is your doctype? Make sure it is the same as the example, i.e. XHTML, not HTML 4.01 TRANSITIONAL.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Here's an example of building inline SVGs dynamically with JavaScript.