I'm trying to render SVG images at the back-end using d3 on PhantomJS. PhantomJS only returns a portion of the SVG (just the header).
What I've tried so far:
I ran the same script in the browser console and noticed that if I try to do alert(d3.select("#pieChart").html()) (see code below) immediately after running svgDrawer, it shows the exact partial SVG. But then the pie gets rendered on to the HTML, and running alert(d3.select("#pieChart").html()) again gives me the complete SVG.
Thinking that the rendering wasn't complete while I returned the value in PhantomJS, I split my method into two - svgDrawer and svgGrabber. But even then, svgGrabber returns partial SVG data when called from PhantomJS. Note that the same two methods, run serially in browser console, now shows the complete SVG
Please help. Thanks in advance.
Here is my boilerplate HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="d3.min.js"></script>
<script src="d3pie.js"></script>
<meta charset="utf-8">
</head>
<body>
<div id="pieChart"></div>
</body>
</html>
and here is the javascript:
var fs = require('fs');
var page = require('webpage').create();
var url = 'file://' + fs.absolute('./d3.html');
var svgDrawer = function() {
var pie = new d3pie("pieChart", {
"header": {
"title": {
"text": "My pieChart"
}
},
"data": {
"content": [
{
"label": "slice 1",
"value": 60.9,
"color": "#8fbc8f"
},
{
"label": "slice 2",
"value": 8.7,
"color": "#dadde0"
},
{
"label": "slice 3",
"value": 30.4,
"color": "#c1d82f"
}
]
}
})
};
var svgGrabber = function() {
return d3.select("#pieChart").html()
};
page.open(url, function (status) {
page.evaluate(svgDrawer)
console.log(page.evaluate(svgGrabber));
phantom.exit();
});
and here is the command I use to generate the final SVG:
phantomjs d3_pie.js > d3_pie.svg
Related
I'm trying to source content with images from Contentful into Gatsby but I failed to get images displayed.
I installed gatsby-transformer-sharp, gatsby-plugin-image, gatsby-plugin-sharp, gatsby-remark-images and gatsby-remark-images-contentful.
down below is a simple of my code
import { GatsbyImage, getImage } from "gatsby-plugin-image"
const Projects = ({ data }) => {
const projects = data.projects.nodes
return (
<Layout>
<Seo
title={"Projects"}
description={"Projects & Websites I've Developed"}
/>
<div className={styles.portfolio}>
<h1>My Portfolio</h1>
<h2>Projects & Websites I've Developed</h2>
<div className={styles.projects}>
{projects.map(project => (
<Link
to={"/projects/" + project.slug}
key={project.id}
className={styles.project}
>
<GatsbyImage
image={getImage(project.thumb)}
alt={project.title}
/>
<div className={styles.cardText}>
<h3>{project.title}</h3>
<p>{project.stack}</p>
</div>
</Link>
))}
</div>
</div>
</Layout>
)
}
export default Projects
export const query = graphql`
query ProjectsPage {
projects: allContentfulProjects(sort: { fields: date, order: DESC }) {
nodes {
key
slug
stack
title
thumb {
gatsbyImageData(placeholder: BLURRED, layout: FULL_WIDTH)
}
id
}
}
}
`
here what i got from GraphQL
{
"data": {
"projects": {
"nodes": [
{
"key": "project",
"slug": "portfolio-website",
"stack": "html - css - javascript",
"title": "Portfolio Website",
"thumb": [
{
"gatsbyImageData": {
"images": {
"sources": [
{
"srcSet": "https://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=750&h=361&q=50&fm=webp 750w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1080&h=520&q=50&fm=webp 1080w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1366&h=658&q=50&fm=webp 1366w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1920&h=925&q=50&fm=webp 1920w",
"sizes": "100vw",
"type": "image/webp"
}
],
"fallback": {
"src": "https://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1920&h=925&q=50&fm=png",
"srcSet": "https://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=750&h=361&q=50&fm=png 750w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1080&h=520&q=50&fm=png 1080w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1366&h=658&q=50&fm=png 1366w,\nhttps://images.ctfassets.net/kj59ethbquzj/1qDaw8RjPxxhzjOehxHz1g/152307656408e0efcf7c907a59cd91a7/personal-portfolio-website.png?w=1920&h=925&q=50&fm=png 1920w",
"sizes": "100vw"
}
},
"layout": "fullWidth",
"width": 1,
"height": 0.4817708333333333,
"placeholder": {
"fallback": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAMAAACDi47UAAABv1BMVEUaGhosLSN+gm9ORjIcHBwlJB8kJBgkJBclJBgeHRREORVFWEeEj5SNingqNys+x8tWzNFk1Nhq1dl42Nx51dp219xw19twxMhjyMxKys89x8wnZlw7MhUiIRtrKiRCLCBHys5bztJu1tuD2t501tp62N1519yokpF3b25My9A/yc4oZ10VFRUkJCQoKChHR0c1NTUqKSotOCxEw8dbxcllys1owcR30dR2z9Nyz9NkyM2+n52cjo0/wsc5vsMrXVNdTx2niSCnjCqniiOfgyAtOC1HsbVRq69errJcpah1y8982N1u1dpto7F7RlG7lpeLWXVFr7koYFYtKiJJQyxTTDZMRS9DPSssNytNk5VWf3VbfWVWdVlnsKxryc1ays+xJ06sCy2sCS2wCi2bJkYrXlUjIyMuLi48PDw0NDQsLCwrNyw6n6I/j5BJlZBJlJFavL5Xxco4v8XDEz+QCiSqCSuHCiCJDidhKS07OzszMzMeHRk4NSg7OCs5NSk5NSg6Nio5Nik7Nys6NyocGhI6OjkxMTEYGBgmJiUmJiYjJCQlJSUXFxcWFhYRERE0Lhw7NBxBORwpJRswMDA0NTUvbwraAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAB3RJTUUH5gUJBR4Qdhx/lQAAAGRJREFUCNeNzUEKglAAANEZ/5cgRLTO0ZWCTtS6jdfxEJ5BUNyF+FuIiNSit5zNiKuUAbBAMHLWqfQgctGJWsdqrze/9PH6Z+R3hNphe8z5HFIgQuFQqHbtHSVlyFN9n3w92DQfWKcTSK8wndgAAAAASUVORK5CYII="
what it might be wrong with My code? need some help :)
According to what you said in the comment section, I'd say that there's a position in projects that has no thumbnail defined (or not properly queried).
Try adding a condition wrapping the GatsbyImage display:
{project.thumb && <GatsbyImage
image={getImage(project.thumb)}
alt={project.title}
/>}
That said, check in which project you have no thumbnail.
Finally I have figured it out by
1- I removed all My content and images in Contentful CMS and create a fresh ones, It seemed there was a bug with sourcing Images into GraphQL where the Image src was always giving an empty array!!
2- Taking out getImage function and replace it with <GatsbyImage image={project.thumb.gatsbyImageData} alt={project.title}/>
,then gatsby clean to clear the .cashe and also triggered clean cashe and rebuild.
Now everything is works well.
I am trying to send a post request from sketchup to the api i made.I have web dialog.On the web dialog,On click the “save” button the post request will be executed.I want to send the information as json.I have been able to access the api i made.How can i access the length,width and send the length,width,volume from the sketchup model as json.here is the model i wrote::
def self.show_dialog
#dialog ||= self.create_dialog
#dialog.add_action_callback("ready") { |action_context|
self.update_dialog
nil
}
#dialog.add_action_callback("accept") { |action_context, value|
self.update_material(value)
#dialog.close
nil
}
#dialog.add_action_callback("cancel") { |action_context, value|
#dialog.close
nil
}
#dialog.add_action_callback("save") { |action_context, value|
self.update_material(value)
request = Sketchup::Http::Request.new("http://127.0.0.1:5000/api/v1/projectStatus/save", Sketchup::Http::POST )
request.start do |request, response|
puts "body: #{response.body}"
end
nil
}
#dialog.show
end
I want send the the post request something like this:
{
"length": "11",
"width": "12",
"volume": "168"
}
you have 2 methods:
JAVASCRIPT INSIDE THE PAGE
-> send a request in javascript directly inside your webdialog as in a normal html page. For exemple, if you use Jquery:
<html>
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>
.....
<body>
<button id="save">save</button>
</body>
<script>
$( "#save" ).click(function() {
$.ajax({
type: "POST",
url: "http://127.0.0.1:5000/api/v1/projectStatus/save",
data: {
"length": "11",
"width": "12",
"volume": "168"
},
success: success,
dataType: dataType
});
});
</script>
</html>
IN RUBY
inside your ruby by removing Sketchup ruby code, by removing Sketchup and add
Sketchup::require 'net/http'
....
#dialog.add_action_callback("save") { |action_context, value|
self.update_material(value)
uri = URI("http://127.0.0.1:5000/api/v1/projectStatus/sav")
result_json = Net::HTTP.post(uri,{
"length": "11",
"width": "12",
"volume": "168"
})
result = JSON.parse(result_json)
}
Hope it's help
I want to know uploaded images only a images its not have any type of hidden embedded data like other images or any IP address
Thanks
You can use the image as a button and call a JavaScript function. This function will need to call an API that will return the data you want.
<img onclick="javascript:getIPData()" src="China-Flag-256.png" />
<script>
function getIPData() {
var request = new XMLHttpRequest();
request.open('GET', 'http://freegeoip.net/json/', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var data = JSON.parse(request.responseText);
} else {
// We reached the service, but it returned an error
}
};
request.onerror = function() {
// Deal with connection error here
};
request.send();
}
</script>
will return:
{
"ip": "116.12.250.1",
"country_code": "SG",
"country_name": "Singapore",
"region_code": "01",
"region_name": "Central Singapore Community Development Council",
"city": "Singapore",
"zip_code": "",
"time_zone": "Asia/Singapore",
"latitude": 1.2931,
"longitude": 103.8558,
"metro_code": 0
}
You can check more services to request the IP from this other question How to get client's IP address using JavaScript only?
I created a simple static network with D3plus. I want to have a working hyperlink in tooltip/legend which depends on the name of selected node?
So if the node name is "Berlin" I want a link to "https://en.wikipedia.org/wiki/Berlin"
How to do that?
Thanks
Using this example as a starting point for creating a large tooltip with clickable content, the "html" key can be passed a function which will get passed the id of the clicked data point:
var sample_data = [
{"value": 100, "name": "Berlin"},
{"value": 70, "name": "London"},
{"value": 40, "name": "Paris"}
]
function htmlContent(id) {
return "<a href='https://en.wikipedia.org/wiki/" + id + "'>Click Here</a>";
}
var visualization = d3plus.viz()
.container("#viz")
.data(sample_data)
.id("name")
.size("value")
.tooltip({"html": htmlContent})
.type("tree_map")
.draw();
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
I am a complete novice at d3.js or java in general. I am using the indented tree example from http://bl.ocks.org/1093025. It took me two hours to get this to work on my local computer, so that should give you an idea of my skill level.
I opened the flare.json file and started messing with it and was able to manipulate it successfully. It looks like this
{
"name": "Test D3",
"children": [
{
"name": "News",
"children": [
{
"name": "CNN",
"size": 1000
},
{
"name": "BBC",
"size": 3812
}
]
},
{
"name": "Blogs",
"children": [
{
"name": "Engaget",
"size": 3938
}
]
},
{
"name": "Search",
"children": [
{
"name": "Google",
"size": 3938
},
{
"name": "Bing",
"size": 3938
}
]
}
]
}
What I want to do now, is to try to add hyperlinks. For example, I want to be able to click on "CNN" and go to CNN.com. Is there a modification I can make to flare.json that will do that?
It is quite easy, just add some more "key" : "value" pairs. Example:
"children": [
{
"name": "Google",
"size": 3938,
"url": "https://www.google.com"
},
{
"name": "Bing",
"size": 3938,
"url": "http://www.bing.com"
}
]
Of course, in your d3 code you then need to append <svg:a> tags and set their xlink:href attribute.
Here is some html and d3-code that might be of help to you. First you need to import the xlink namespace in your html file:
<html xmlns:xlink="http://www.w3.org/1999/xlink">
...
</html>
Then in the d3 drawing code where you append nodes for each data element you wrap the element you want to be clickable links with an svg:a tag:
nodeEnter.append("svg:a")
.attr("xlink:href", function(d){return d.url;}) // <-- reading the new "url" property
.append("svg:rect")
.attr("y", -barHeight / 2)
.attr("height", barHeight)
.attr("width", barWidth)
.style("fill", color)
.on("click", click); // <- remove this if you like
You might want to remove the click handler (which is present in the original example) by deleting the .on("click", click) as it might interfere with the default behavior of SVG links.
Clicking on your rects should now lead you to the appropriate url.
SVG links might not be fully implemented in all browsers.
Alternatively you could modify the click handler to read the URL from d.url and use that one to manually redirect the browser to that URL via JavaScript: window.location = d.url;. Then you do not need the svg:a tag and the xlink code. Though adding a real link (not a scripted one) has the benefit that the user/browser can decide what to do (e.g., open in new tab/page). It also helps if some of your users have JavaScript disabled.