Text not rendered in d3 visualization - javascript

I'm reviewing the code of the visualization here http://bl.ocks.org/mbostock/4062045, and I'm curious to know why is name from the json file not rendered together with the nodes even though the code included:
node.append("title").text(function(d) { return d.name; });

The SVG <title> element is not displayed on screen. It is used as the tooltip text by browsers (and is also used by screen readers) in the same way as a title attribute in HTML.
I.e., the SVG code
<svg>
<image xlink:href="image.png">
<title>My PNG</title>
</image>
</svg>
Is equivalent to the HTML code
<div>
<img src="image.png" title="My PNG" />
</div>

Attribute title is supposed to be displayed as a tooltip (if you hover over a node), and it is really correctly displayed, check it out. (I know... it's not logical, but such is standard)

Related

Is it possible to render SVG elements directly in Svelte?

I am trying to import and render SVG's in Svelte.
I am using #rollup/plugin-url to import the SVG code like so:
<script>
import arrowCircle from "heroicons/dist/solid-sm/sm-arrow-circle-up.svg"
</script>
<main>
<object title="Arrow Circle" type="image/svg+xml" data={arrowCircle}></object>
</main>
Now this works (in terms of the SVG content getting brought in) but it renders the following screen:
Ideally I would like to use the <object /> element so I can apply classes to the SVG but given the error I thought I would have a go with the <img /> tag to see if this would at least render the SVG, but instead got this:
<img src="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22currentColor%22%3E%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2018a8%208%200%20100-16%208%208%200%20000%2016zm3.707-8.707l-3-3a1%201%200%2000-1.414%200l-3%203a1%201%200%20001.414%201.414L9%209.414V13a1%201%200%20102%200V9.414l1.293%201.293a1%201%200%20001.414-1.414z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E">
I also tried just {arrowCircle} but that rendered the above image src as plain text.
From what I can tell it is to do with the data prefix that is part of the raw import.
I am aware of the codefeathers/rollup-plugin-svelte-svg plugin but would like to be able to do be able to do this without another plugin if possible, or at least understand what is going on.
For reference SVG are valid in both <img /> tags as well as <object /> as per this article.
It looks as though the SVG file isn't valid as a standalone image. Try this:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>

How to put the ALT-value of an image into a variable in javascript or jquery

I’ve made a cardspread program that is based on the source of the image. It works allright, but it is loading slowly, because now 78 different cards are loaded. I like to speed up the loading and I thought I needed an extra item per DIV. So I added an ALT-tag to each image. Like this:
<div id="kaart1">
<alt=kaart14.jpg>
<img src="images/kaart1.jpg" width="110" height="180" onclick="showDiv(event)>
</alt=kaart14.jpg>
</div>
Now I need only 1 image to load 78 times, which is faster. The problem which I am facing now is that I want to read the alt value into a variable (in this case: kaart14.jpg).
I’ve tried :
$('.status').click(function() {
var status = $(this).attr('alt');
});
But that stays empty. Does anyone have a suggestion how to solve this in Javascript or jQuery?
First, there is no <alt> tag. It is used as alternative to <img>. The value is displayed if the image is not loaded.
It is just plain text. If you put a url there, it will just display the url and not the image itself.
Eg:
<img src="myphoto.jpg" alt="This is my photo">
There is no performance gain if you use alt or not, but you definitely SEO
Your alt attribute should be like
<div id="kaart1">
<img src="images/kaart1.jpg" alt="kaart Image" width="110" height="180" onclick="showDiv(event)>
</div>
alt is an attribute of the img tag,its not a tag itself.And as #Bergi said,the alt attribute will not be an another image.It may be the description.

SVG anchor current page highlight

I have an SVG-based menu with links similar to the following. I'd like to highlight the current page's link (e.g., by adding "font-weight:bold"). Any suggestions? Should I do something with Javascript? (Note that I'm linking the SVG in my HTML page via an <object> tag for compatibility, so the solution has to work with that constraint.) Oh, and I'm fine with the highlight only working in modern browsers.
<svg ...>
<style type="text/css">
a text {
fill:#ffffff;
}
a:hover text {
fill:#2020ff;
}
</style>
<g>
<a id="aHome" xlink:href="/" target="_top">
<text id="txtHome">Home</text>
</a>
...
</g>
</svg>
Well, apparently forgetting about this for a week was worth a bronze badge. :-P
Anyways, the code above is actually correct by itself. Go figure - I had other overriding CSS styles that caused the a:hover bit to fail.

How to overlay data on an image

I am a rookie web developer and I am looking to put data points over an image that can be interacted with when hovered over, similar to most common map applications.
From my current understanding, using the Canvas in Javascript seems to be the best way to go, does anyone have any recommendations on how to do this and maybe point me in the right direction?
Does not require canvas although canvas can be used.
Shortest coding would be make a div with a background image being the image you want to place points on.
If it is not an image then you would need to make two divides on the overlay divide (the first one in the HTML code) use position:absolute to place it on top with the same width and height -- then the image content divide that follows will be layered under your absolute positioned divide.
<div style="background:url(image.jpg); width:100px; height:100px">
... material here is on top of the image ...
</div>
or
<div style="position:absolute; width:100px; height:100px">
... material here is on top of the image ...
</div>
<div style="width:100px; height:100px">
... place object here which picks up your map or whatever ...
</div>
The ... material here is on top of the image ... can be a canvas but SVG would be less coding as it has links supported
<div style="background:url(image.jpg); width:100px; height:100px">
<object data="yourOverlay.svg" width="100" height="100" >
</object>
</div>
Here is a sample SVG file posted at http://tutorials.jenkov.com/svg/a-element.html
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="/svg/index.html">
<text x="10" y="20">/svg/index.html</text>
</a>
<a xlink:href="/svg/index.html" xlink:show="new">
<text x="10" y="40">/svg/index.html
(xlink:show="new")</text>
</a>
<a xlink:href="/svg/index.html" xlink:show="replace">
<text x="10" y="60">/svg/index.html
(xlink:show="replace")</text>
</a>
<a xlink:href="/svg/index.html" target="_blank">
<text x="10" y="80">m/svg/index.html
(target="_blank")</text>
</a>
<a xlink:href="/svg/index.html" target="_top">
<text x="10" y="100">/svg/index.html
(target="_top")</text>
</a>
</svg>
Depending on your application you may want to consider straight HTML for "... material here is on top of the image ..." so it will work in older browsers.
And FYI you could code the background into the SVG and just have a object tag in the html page and use googles "SVGWEB" http://code.google.com/p/svgweb/ to support nearly every browser.
Good resource here: http://dev.opera.com/articles/view/html5-canvas-painting/
But for what you're doing, you don't really need a canvas, imo. If you have an image, and you know where stuff is that you want to overlay (pixel offset), you can provide the pixel offsets from each data point in JSON or XML to your client script, and then just have it use absolute positioning to place them where they need to be on the image.
Another possible solution is to just use an SVG image which i believe supports links ect directly

SVG title tooltip not showing on text element

I need to have a tooltip show up on mouseover of an SVG Text element. Everything I find on the net says to add a Title element as the first child of the SVG element. It works in Chrome, but not in Safari which is the primary browser of my user base.
Here is simplified example showing my situation. The

is a FontAwesome lightbulb icon that is the element I want the user to mouseover and have the tooltip come up on.
<svg ...><text><title>some text</title></text></svg>
Ideas?
I tested the following snippet in Safari 12.1 and the tooltop "some text" showed up as expected. Perhaps you are testing with an older version of Safari, or maybe you are using a plugin that is affecting this feature?
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<svg width="50" height="50">
<text x="10" y="20" class="fas">
<title>some text</title>

</text>
</svg>

Categories