Why the result of bBox.width, bBox.height are both 0? I expect them to be both 500px, how to rectify it?
<!DOCTYPE html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.8/d3.min.js" type="text/JavaScript"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.js" type="text/JavaScript"></script-->
<style>
rect {
stroke: #9A8B7A;
stroke-width: 1px;
fill: #CF7D1C;
}
svg{
width: 500px;
height: 500px;
background:blue;
}
</style>
<body>
</body>
<script>
var svg = d3.select("body").append("svg");
var bBox = svg.node().getBBox();
console.log(bBox.width + 'x' + bBox.height);
</script>
Try getBoundingClientRect instead of getBBox.
Related
I think I've hit a wall here. Not sure why my map isn't displaying at all.
I've converted the topojson file to geojson with the topojson client (https://github.com/topojson/topojson-client/blob/master/README.md)
Here's my JS file (I'm seeing my #map and background color, but nothing is rendering inside.)
var width = 900,
height = 600;
var svg = d3.select('#map')
.append('svg')
.attr('width', width)
.attr('height', height);
var projection = d3.geoAlbersUsa()
var path = d3.geoPath()
.projection(projection);
d3.json("https://gist.githubusercontent.com/Lupi7000/d770ce6f2985c3a7bac1099688e4f772/raw/d327f59834fb0f9f2201ad71c3f1711ecb5bf6de/NYTest.json")
.then(function(d) {
console.log(d)
var counties = topojson.feature(d, d.objects.cb_2015_new_york_county_20m)
console.log(counties)
svg.selectAll('path').data(counties.features)
.enter().append('path')
.attr('d', path);
});
Here's my HTML
<html>
<head>
<meta charset="UTF-8">
<title> NYS Map</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/topojson#3.0.2/dist/topojson.min.js"></script>
<script src="https://unpkg.com/topojson-client#3"></script>
<script src="NYmap.js"></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3> NYS MAP CLICKABLE AND SHIT... EVENTUALLY</h3>
<div id="map"><!-- MAP CONTAINER --></div>
</body>
</html>
And my stylesheet
body {
margin: 25px;
}
#map {
width: 900px;
height: 600px;
border: 1px solid black;
background: whitesmoke;
}
path {
fill: black;
}
Any help would be appreciated, thanks!
I've console logged my data so it's coming through, but I'm not sure what I need to do to make it show up.
My svg line will not amimate. I have put the svg and javascript in a codepen and it worked well. But in my html file the line won't appear and no line is drawn on the page on my local machine. Why is my javascript not running? Any help is appreciated. Am a newbie to javascript. it works fine in the snippet attached
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#300;700&display=swap" rel="stylesheet">
<title>Your Website</title>
<style>
body {
background-color: #F0EDE7;
font-family: 'Inter', sans-serif;
margin: 0;
}
nav {
padding: 0 72px;
}
nav ul {
display: flex;
padding: 0;
align-items: flex-end;
}
nav ul li{
text-decoration: none;
list-style: none;
font-weight: 700;
padding-right: 4%;
font-size: 1.414rem;
}
nav ul svg {
height: 72px;
margin-right: 2%;
}
#journey-line {
position: absolute;
right: 8%;
width: 40%;
top: 0;
display: flex;
}
.intro {
display: flex;
width: 60%;
height: 84vh;
align-items: center;
padding: 0px 72px;
}
.intro__content {
}
h1 {
font-size: 5.653rem;
margin: 0;
}
p {
font-size: 1.999rem;
margin: 24px 0 0 0;
}
</style>
</head>
<body>
<figure id ="journey-line" >
<svg viewBox="0 0 830.17 1768.03" preserveAspectRatio="xMidYMid meet">
<path d="M680.84,0V904.51c0,55.23-44.77,100-100,100H250.42c-121.5,0-220,98.5-220,220l-.42,543.5" style="fill: none; stroke: #F0B8A3; stroke-miterlimit: 10; stroke-width: 60px;"/>
</svg>
</figure>
<section class="intro">
<artticle class="intro__content">
<h1>Title</h1>
<p>paragraph</p>
</artticle>
</section>
<script>
let path = document.querySelector("path");
let pathLength = path.getTotalLength();
path.style.strokeDasharray = pathLength + " " + pathLength;
path.style.strokeDashoffset = pathLength;
window.addEventListener("scroll", () => {
var scrollPercentage =
(document.documentElement.scrollTop + document.body.scrollTop) /
(document.documentElement.scrollHeight -
document.documentElement.clientHeight);
// Length to offset the dashes
var drawLength = pathLength * scrollPercentage;
// Draw reverse
path.style.strokeDashoffset = pathLength - drawLength;
})
</script>
</body>
</html>
The Goal
I'm trying to implement this…
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3plus.org/js/d3.js"></script>
<script src="https://d3plus.org/js/d3plus.js"></script>
<style>
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
background: linear-gradient(to top, #ddfdff, #6DD5FA, #2980B9);
}
svg {
font-family: "Helvetica", "Arial", sans-serif;
height: 100%;
width: 100%;
background: transparent;
}
.type {
fill: #888;
text-anchor: middle;
}
.shape {
fill: red;
stroke: black;
}
.invis {
fill: transparent;
stroke: transparent;
}
.title {
fill: #ffebeb;
}
</style>
</head>
<body>
<svg>
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M584.924 352C566.379 596.253 442.233 717.371 312.762 721.625C314.849 722.912 315.945 724.404 315.439 725.873C314.85 727.582 313.363 728.819 311.349 729.634C313.835 731.14 315.947 732.306 317.185 732.541C324.33 733.901 329.242 736.83 328.72 740.738C326.639 756.297 285.436 758.859 279.246 744.483C277.43 740.263 282.545 736.546 290.185 734.22C291.876 733.706 291.976 731.183 291.936 728.476C288.699 727.054 286.268 725.043 285.663 722.579C285.504 721.933 285.607 721.353 285.928 720.839C157.97 709.163 31.5609 584.211 2.92421 352C-23.4665 138 133.209 0 293.924 0C454.639 0 600.034 153 584.924 352Z" fill="#C80E0E"/>
<!-- 'd3plus' uses this circle as a text mask. -->
<!-- Honestly, I don't fully understand how this works; -->
<!-- Changing the circle's radius yields strange effects. -->
<circle class="shape invis" r="15px" cx="0px" cy="0px"></circle>
<text id="circleResize" class="wrap title" x="0px" y="110px" font-size="2rem">
Why is it so difficult to center text in a shape like this while specifying curved outer bounds?
</text>
</svg>
<script>
// Wrap text in a circle, and size the text to fit.
d3plus.textwrap()
.container(d3.select("#circleResize"))
.width(620)
.height(1000)
.resize(true)
.draw();
</script>
</body>
</html>
…in Svelte.
The Problem
I can't seem to get d3plus to work with Svelte.
First I tried using <svelte:head> to house the <script src="https://d3plus.org… lines. I don't recall what happened when I tried that, but my hunch is that <svelte:head> only works with CSS, or other files whose content doesn't need to be parsed by Svelte. ¯_(ツ)_/¯?
At any rate, my next approach is represented (in part) below. I first saved d3.js and d3plus.js in src, then, as shown, I import the symbols directly.
In this second scenario, though, I keep getting this console error:
Uncaught TypeError: Cannot read property 'document' of undefined
at d3.js:8
at d3.js:9553
at createCommonjsModule (index.mjs:1328)
at index.mjs:1328
at main.js:8
Presumably what's happening here is that the d3 source is getting run before the app's had a chance to load, and so document remains undefined? Regardless, I'm stuck!
Here's the (broken) code, fwiw:
<script>
import d3 from './d3.js';
import d3plus from './d3plus.js'
d3plus.textwrap()
.container(d3.select("#circleResize"))
.resize(true)
.draw();
</script>
<style>
svg {
font-family: "Helvetica", "Arial", sans-serif;
height: 100%;
width: 100%;
background: transparent;
}
.type {
fill: #888;
text-anchor: middle;
}
.shape {
fill: red;
stroke: black;
}
.invis {
/* Fill will be transparent in final outlay */
fill: #10ef3394;
stroke: transparent;
stroke-width: .1rem;
}
.title {
fill: #ffebeb;
}
</style>
<svg>
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M584.924 352C566.379 596.253 442.233 717.371 312.762 721.625C314.849 722.912 315.945 724.404 315.439 725.873C314.85 727.582 313.363 728.819 311.349 729.634C313.835 731.14 315.947 732.306 317.185 732.541C324.33 733.901 329.242 736.83 328.72 740.738C326.639 756.297 285.436 758.859 279.246 744.483C277.43 740.263 282.545 736.546 290.185 734.22C291.876 733.706 291.976 731.183 291.936 728.476C288.699 727.054 286.268 725.043 285.663 722.579C285.504 721.933 285.607 721.353 285.928 720.839C157.97 709.163 31.5609 584.211 2.92421 352C-23.4665 138 133.209 0 293.924 0C454.639 0 600.034 153 584.924 352Z" fill="#C80E0E"/>
<circle class="shape invis" r="15px" cx="0px" cy="0px"></circle>
<text id="circleResize" class="wrap title" x="0px" y="110px" font-size="2rem">
Why is it so difficult to center text in a shape like this while specifying curved outer bounds?
</text>
</svg>
How can I get this working in Svelte??? 🥴
Working code
(With 👏 to #CD.. here on S.O., and #primos on Discord for their help!)
📝 The range slider and bound variables are just a bit of reactive fun to test moving the text and balloon together.
/public/index.html
<!doctype html>
<html>
<head>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/bundle.css'>
<script src="https://d3plus.org/js/d3.js"></script> <!-- 👈 -->
<script src="https://d3plus.org/js/d3plus.js"></script> <!-- 👈 -->
<script defer src='/bundle.js'></script>
</head>
<body>
</body>
</html>
App.svelte
<script>
import { onMount } from 'svelte'; // 👈
onMount(() => { // 👈
d3plus.textwrap()
.container(d3.select("#circleResize"))
.resize(true)
.draw();
});
export let name;
let i = 0;
const minX = 293;
let windowWidth;
let skyHeight;
</script>
<svelte:window bind:innerWidth={windowWidth}/>
<style>
svg {
font-family: "Helvetica", "Arial", sans-serif;
height: 90%;
width: 100%;
background: transparent;
}
.type {
fill: #888;
text-anchor: middle;
}
.shape {
fill: red;
stroke: black;
}
.invis {
fill: transparent;
stroke: transparent;
stroke-width: .1rem;
}
.title {
fill: #ffebeb;
}
</style>
<label>
<input type="range" bind:value={i} max={windowWidth - (2 * minX)}>
</label>
<div>{i}</div>
<svg>
<path id="Union" fill-rule="evenodd" clip-rule="evenodd" transform="translate({i},0)" d="M584.924 352C566.379 596.253 442.233 717.371 312.762 721.625C314.849 722.912 315.945 724.404 315.439 725.873C314.85 727.582 313.363 728.819 311.349 729.634C313.835 731.14 315.947 732.306 317.185 732.541C324.33 733.901 329.242 736.83 328.72 740.738C326.639 756.297 285.436 758.859 279.246 744.483C277.43 740.263 282.545 736.546 290.185 734.22C291.876 733.706 291.976 731.183 291.936 728.476C288.699 727.054 286.268 725.043 285.663 722.579C285.504 721.933 285.607 721.353 285.928 720.839C157.97 709.163 31.5609 584.211 2.92421 352C-23.4665 138 133.209 0 293.924 0C454.639 0 600.034 153 584.924 352Z" fill="#C80E0E"/>
<circle class="shape invis" r="280px" cx="{minX}" cy="300px"></circle>
<text id="circleResize" class="wrap title" x="0px" y="110px" font-size="2rem" transform="translate({i},0)">
Why is it so difficult to center text in a shape like this while specifying curved outer bounds?
</text>
</svg>
I've copied the code below from the example provided here https://scrimba.com/casts/cast-1953
However, no graph is shown. I also get no errors in the console.
When I enter d3 in the console an object is returned, so d3 is found.
What am I missing?
<head>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<script type="text/javascript">
var data = [30, 86, 168, 281, 303, 365];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function (d) { return d + "px"; })
.text(function (d) { return d; });
</script>
</head>
<body>
<div class="chart"></div>
</body>
Instead using script in head, try to use at the bottom of the page or use when page is ready.
<head>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<div class="chart"></div>
<script type="text/javascript">
var data = [30, 86, 168, 281, 303, 365];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function (d) { return d + "px"; })
.text(function (d) { return d; });
</script>
You must place the body before the script like so:
<body>
<div class="chart"></div>
</body>
<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
.chart div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
</style>
<script type="text/javascript">
var data = [30, 86, 168, 281, 303, 365];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter()
.append("div")
.style("width", function(d) {
return d + "px";
})
.text(function(d) {
return d;
});
</script>
Apologies if this is rudimentary but I am new to D3. I'm having trouble importing my csv data and displaying it as a table that can be opened in a browser. All my data files and code are located in the same folder. Here is the code I have so far and my csv data. Any advice is greatly appreciated!
SublimeFile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<title>Dashboard</title>
<link rel="stylesheet" href="normalize.css">
<style>
table {
border-collapse: collapse;
border: 2px grey solid;
font: 12px sans-serif;
}
td {
border: 1px grey solid;
padding: 5px;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-left:40px;
font-weight: 200;
font-size: 16px;
}
h1 {font-weight: 400;}
p {font-size: 12px;}
text {font-size: 12px;}
</style>
</head>
<body>
<div id = "Chart"></div>
<script>
d3.text("dashboard.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("body")
.append("table")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) { return d; }).enter()
.append("td")
.text(function(d) { return d; });
});
</script>
</body>
</html>
dashboard.csv
Entity,Entity A
Head of Data,Albert Aldridge
DG Lead,Anna Annovo
BIO,April Autumn
Business Participants,"Alfred, Adeline, Amy"
Scope,European Platforms
Scope Trend,Steady
Thanks for your efforts, I was able to figure it out. I was trying to run the .html file in chrome & internet explorer with no luck. It seems to only work in firefox for me.