I'm using Bludit CMS to build a simple website. The only task I could handle is to add a D3 Graph into the site. My Graph and the code looks pretty like this: http://bl.ocks.org/mbostock/1093130
The graph is displayed at the position, where I insert the script tag of the graph. The problem is, that I'm not able to add a script tag in Bludit CMS, only HTML.
Now, I thought about adding an empty div tag with an id to my CMS editor like
<div id="myGraph">
</div>
and add the graph programmatically to this div. How can I do that?
One further note: I want to try to do it only with Javascript without using jQuery. I don't want to include jQuery to my page only to add a graph to my website.
If you can't add JavaScript to a page you won't be able to use D3.
If you can load in code from an external file then use:
<script src="myfile.js"></script>
If you can only add it to every page rather than just one then check for your id and then execute the code.
if( d3.select("#myGraph") ) {
var svg = d3.select("#myGraph")
.append( "svg")
.attr("width", 1000)
.attr("height", 1000);
// Do stuff with SVG.
}
Related
I have tried to load an svg from server and show it into an html element using jQuery like as follows,but it does not show the svg,what is wrong with this code?
I know it can show using <img> tag,but i need to write some events on the svg elements.
$.get( "http://example.com/_assets/img/gptest.svg", function( data ) {
$( "#svg-main" ).append( data );
});
<div id="svg-main"></div>
Why don't you just add an img-tag?
<img src="http://example.com/_assets/img/gptest.svg">
If you want to add it via jQuery do it like this:
$('#svg-main').append('<img src="http://example.com/_assets/img/gptest.svg">');
Here is a handy article about svg.
Basically you need to define width nad height in order ot display svg image.
So that's probably why it is not displaying in your case.
I'm creating a splash page using canvas and javascript that includes an "erasable" layer on top of HTML. The erasable canvas layer completely covers the html content in the background, and it is not to be visible until the user starts erasing.
However, upon loading, the html content shows up first and then the erasable layer appears. Is there a way for the erasable canvas layer to show up first without the user seeing the html content until erased?
I tried putting the erasable canvas and the script used by it before the HTML content, and it still does not work.
Any suggestions on how to solve this?
Thanks!
You could try making all your HTML content hidden and then with your JavaScript code make it visible when needed.
What looks like your problem is that your script is loaded before your HTML is being parsed. You could have several options like:
1) Have your JavaScript create your HTML content but also make sure it creates the erasable canvas first. You could do this several ways or even use XMLHttpRequest() to go fetch the HTML content.
2) As mentioned by #Beans, you can have something like this:
<script>
document.body.addEventListener('load', function () {
// your canvas code here (make sure it get displayed on top of body)
document.body.style.display = null;
});
</script>
<body style="display: none">
Some stuff here
</body>
I am using GWT 2.6.1 (+ GWT Graphics) and trying to draw SVG objects and display a tooltip on each one as follows:
Point point = new Point(100, 100);
Circle reading = new Circle(point.getX(), point.getY(), 3);
reading.setFillColor("#000");
final String infoTip = "120 bpm";
Element titleElement = DOM.createElement("title");
titleElement.setInnerText(infoTip);
reading.getElement().appendChild(titleElement);
Now although the SVG circle draws correctly, the tooltip doesn't work. I tried pasting the generated html into a static html file and that works fine, so it is something to do with dynamically adding the title element to the circle I guess but don't know how to solve it.
I have tried adding the title element inside a deferred action:
Scheduler.Get().ScheduleDeferred(...)
and I have tried adding it in the onLoad:
Event.sinkEvents(reading.getElement(), Event.ONLOAD);
Event.setEventListener(reading.getElement(), new EventListener(){});
but no luck.
DOM.createElement() will be creating elements in the HTML namespace. Your <title> element needs to be in the SVG namespace.
You will need to use native JS DOM methods to do that. See the answer by Jared Garst on this other question for how:
Using SVG in GWT
I've searched all over the place for an answer to this question and found some resources that I thought may be useful, but ultimately did not lead me to an answer. Here are a few...
External SVG
Embed SVG
The issue
What I am trying to do it append an existing SVG element or string to a DIV on the page and then be able to apply various D3.js properties and attributes on it, so I can later manipulate and work with it (such as apply zooming abilities, etc.).
I was previously using jQuery SVG in which I did this:
var shapesRequest= '"<svg id="shapes" width="640" height="480" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg">' +
'<polygon id="svgSection_Floor" points="222.61,199.75,222.61,295.19,380.62,295.19,380.62,199.75,222.61,199.75,368.46,283.92,233.54,283.92,233.54,209.12,368.46,209.12,368.46,283.92" title="Floor" link="Primary" />' +
'<text x="302.61" y="289.4705">Floor</text>...and a lot more of the same...</svg>';
$('#svgtmp').append(shapesRequest);
$('#svgtmp #shapes text').attr('fill', 'white').attr('font-size', '9').attr('font-weight', 'bold');
$('#pnlShapes').width(640).height(480).svg().svg('get').add($('#svgtmp #shapes'));
So essentially what jQuery SVG and my code is doing is appending the SVG string to a temporary DIV, manipulating some properties within the SVG, then adding that SVG to its permanent location on the page.
This is exactly what I am trying to do with D3. Although I am not sure if I need to append to a temporary DIV first, as I have access to the SVG string and could just append/attach that to a DOM element with D3.
What I've tried...
var mapSvg = d3.select("#pnlShapes").append("svg").attr("width", svgWidth).attr("height", svgHeight);
d3.xml(shapesRequest, function (xmlData) {
var svgNode = xmlData.getElementsByTagName("svg")[0];
mapSvg.node().appendChild(svgNode);
});
But this isn't the correct approach, as I am not hitting an external API endpoint to retrieve the SVG - I already have it stored as a string.
I was also looking at doing something like this
d3.select("#pnlShapes").append('svg').append(shapesRequest).attr("width", svgWidth).attr("height", svgHeight);
but .append() when using D3 isn't used for this kind of appending.
Question
What is the proper way to append an existing SVG string to the DOM using D3 (also I'm using jQuery if that helps)?
My ultimate goal is to append this SVG and then allow it to be zoomable using this tutorial as my base.
You can use .html to insert a string into a DOM node
d3.select('#svgtmp').append('div').html('<svg...')
There may be an even more elegant way without the <div>.
I am using Highstock V 1.2.5
I want to print chart with some custom HTML details on top of it.
I have created a div in my JSP with custom HTMLand tried adding it before body.appendChild(container); into exporting.js But, It didn't work.
Second, I have tried creating HTMl file and adding $("#tab2").html(); where tab2 is my container. But, No luck with that.
When I open the exported HTML its different than what I get from console.log($("#tab2").html()) and the copy it into HTML.
Is there any way to get container HTML into .js ?
You can edit source in that way: http://jsfiddle.net/3bQne/497/
// some custom code
$(body).append('<div style="width:50px;height:50px; background-color: red"></div>');
body.appendChild(container);
// print
win.focus(); // #1510
win.print();