I try to display round images in a svg. The purpose of it is to display round profile pictures within a graph (like in Gmail). The square images of the people are stored in a spritesheet (profiles.png) and I use d3.js for dynamically generating the svg.
This is the part of the code for the round images
var imgurl = '../../../images/profiles.png';
var svggraph = d3.select("#graph")
.append("svg:svg")
.attr("width", 300)
.attr("height", 300);
var imgRadius = 40;
var profilePos = 1;
var numProfiles = 3;
svggraph.append("defs")
.append("pattern")
.attr("id", "patternId")
.attr("height", 1)
.attr("width", 1)
.attr("x", "0")
.attr("y", "0").append("svg:image")
.attr("xlink:href", imgurl)
.attr("x", -profilePos*2*imgRadius)
.attr("y", 0)
.attr("width", numProfiles*2*imgRadius)
.attr("height", 2*imgRadius);
svggraph.append("circle")
.attr("r", imgRadius)
.attr("cx", imgRadius)
.attr("cy", imgRadius)
.attr("fill", "url(#patternId)");
// to test the imgurl
svggraph.append("svg:image")
.attr("id", "testImage")
.attr("xlink:href", imgurl)
.attr("x", 0)
.attr("y", 100)
.attr("width", 150)
.attr("height", 50);
It worked when I tested it in a plain test HTML, it also worked when I integrated it in my Joomla component in Firefox and Chrome. But if there is a GET query in the url (basically as soon as there is a ? even with no parameters), the round image is not displayed anymore. The svg tags in the "live source code" in the developer tools looks the same if there is a "?" in the url or not. It is always displays correct (with or without query url) in Chrome.
So in summary:
in Chrome -> always works
in FF "plain" HTML with and without ? in url -> works
in FF within Joomla without ? in url -> works
in FF within Joomla with ? in url -> round image not displayed
The test image (#testImage) is always displayed, so the url to the image is apperently correct.
I also tried the same but with clipPath instead of using a pattern, with the same result (not displayed in FF if ? in url and Joomla).
I already did an extensive google search, but the best I could find was this post with the same problem but not an solution.
https://forum.joomla.org/viewtopic.php?t=912784
I don't know what else I could try to fix this.
I had the same issue happening to me for my Joomla 3.6.4 site in Firefox. I resolved it by removing the <base> tag from my template. I added this code to my index.php file in my template:
$doc = JFactory::getDocument();
unset($doc->base);
Related
I have implemented a bar chart with brush (D3.js V3). I have applied clip-path which is working fine for a hard-coded value (#clip).
But when I tried doing it with dynamic id its not working. when I click on a button which opens a model-box the height of bars is also clipped.
Image with model popup
Thanks in advance.
svg.append("defs")
.append("clipPath")
// .attr("id", container)
.attr("id", "clip")
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height);
var dev = '# '+ container ;
main.append("g")
.attr('clip-path', 'url(#clip)')// this is hard coded id
//.attr('clip-path', "url("+ dev +")")// this is dynamic id
.attr("class", "bars")
I am using a world flags sprite sheet from https://github.com/lafeber/world-flags-sprite to add flag images to my force-directed graph. When I follow the instructions it works just fine on an image element I created in html. I added the link to the head of my html file. When I tried it out on the img with the "hello" id, it worked fine. You can see it below.
<div class="f32">
<svg width="960" height="600"><img id="hello"/></svg>
</div>
d3.selectAll("#hello")
.attr("class", "flag us")
But the flag image is not appearing on the following
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("image")
.data(graph.nodes)
.enter().append("image")
.attr("id", "hello")
.attr("width", 200)
.attr("height", 200)
When I try setting the class to a single image element I created in d3, it still does not work:
svg.append("g").attr("transform", "translate(60, 60)")
.append("image")
.attr("id", "hello")
Sure, I ended up not using the sprite sheet, what I did was just use images that were available at http://flags.fmcdn.net. To get the right image to match each country I just input the country code that was available from my json api into the end of the url, just before .png.
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("image")
.data(graph.nodes)
.enter().append("image")
.attr("xlink:href", function(d){return "http://flags.fmcdn.net/data/flags/w580/"+d.code+".png"})
.attr("width", 30)
I want to write a code snippet in d3js that will read a json file, and display a simple bar chart based on the contents of the json file. My json file, mydata.json, is:
[
{“name”: “Apollo_Diomedes”, “age”: 300},
{“name”: “Bjorn_the_Fellhanded”, “age”: 900},
{“name”: “Jonah_Orion”, “age”: 500}
]
d3js code snippet, from index.html:
<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(x) { return x.age; })
.attr("height", 45)
.attr("y", function(x, i) { return i * 50; })
.attr("fill", "blue")
});
</script>
</body>
I'm using d3 v4:
<script src="http://d3js.org/d3.v4.js"></script>.
I've tried opening the index.html file directly, and opening a local server and navigating to localhost:8080 as directed here; both just show me a blank screen. Both index.html and mydata.json are saved in the same folder on my desktop.
For those interested, it's actually this slightly outdated youtube tutorial; it runs d3 v3.
P.S. I can read in info from a CSV, but not json.
It sounds like you have problems with parsing the JSON data. Try replacing your quotation marks to the English ones (").
And in general, always check the console log of your Web browser. I am certain that you will some error printed there.
I'm working with D3 and trying to put some HTML in a rectangle. Currently my code looks like this:
node.append("foreignObject")
.attr("display", "block")
.attr("dy", ".35em")
.attr("transform", null)
.html(function(d) { return sidebarInformation(d); })
.attr("x", 12)
.attr("y", 12)
.attr("text-anchor", "start");
function sidebarInformation(_element){ return '<div>foobar</div>'; }
This works as expected on chrome as expected, but fails to render 'foobar' in firefox. I've tried using .attr("requiredExtensions", "http://www.w3.org/1999/xhtml").append("xhtml:div")
as well but haven't had success. Is there something obvious I'm missing?
you've no width and height attributes. They are required in SVG 1.1 (which Firefox implements).
SVG 2 proposes to have a different sizing mechanism where width and height are mapped CSS properties. Chrome/Opera has implemented this, although I don't think any other UA has yet.
When an event is in play, d3.event.x gives the position of the x coordinate of the mouse click, but relative to the entire HTML doc. I tried using jQuery's $('svg').position() to get the actual position of the svg but this return blatantly fallacious values.
Is there some easy way to find the position of an svg relative to the page that I am overlooking? I am using Chrome, by the way, in case the jQuery problem is an obscure browser error.
EDIT: I checked this in firefox and $('svg').position() returns the correct coordinates. ?!?
Instead of using d3.event, which is the browser's native event, use d3.mouse to get the coordinates relative to some container. For example:
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var rect = svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.on("mousemove", mousemove);
function mousemove(d, i) {
console.log(d3.mouse(this));
}