Comments (10)
When you look at the DOM tree, what’s there? Is there an svg with a path attribute?
In your screenshot, there’s a mismatch between the dimensions shown in the browser window versus what’s computed. Maybe try getting rid of the negative margin top, if that’s hiding elements in your layout.
I would also try creating a hardcoded svg element to see if that draws given your current setup.
from layercake.
When you look at the DOM tree, what’s there? Is there an svg with a path attribute?
The screenshot above shows the expanded DOM tree. I don't see anything except an empty HTML document.
from layercake.
I'd first try to see if any SVGs can render. The iframe in the screenshot is a svelte thing for capturing resizes. Just to be sure, scroll down some more and see what else is in there. Can you make a minimal reproduction? Without that, it's going to be hard to debug remotely.
from layercake.
Replacing with an SVG seems to work fine.
<style>
.chart-container {
width: 100%;
height: 300px;
}
</style>
<div class="chart-container">
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
vs.
<!-- { filename: 'js/App.svelte' } -->
<script>
import { LayerCake } from 'layercake';
// Define some data
const points = [
{x: 0, y: 0},
{x: 5, y: 10},
{x: 10, y: 20},
{x: 15, y: 30},
{x: 20, y: 40}
];
</script>
<style>
.chart-container {
width: 100%;
height: 300px;
}
</style>
<div class="chart-container">
<LayerCake
debug={true}
data={ points }
x='x'
y='y'
>
<!-- Components go here -->
</LayerCake>
</div>
Weird. Well, I'll keep poking around. I was curious if anyone had tried this with Tauri.
from layercake.
That's the expected behavior based on the Svelte code you've posted.
You have to include components where it has the comment <!-- Components go here -->
. The LayerCake component is measuring the extents of your data and creating scales. It will only render when you've passed in components that create SVG, HTML or Canvas elements.
from layercake.
For example, import the Svg
layout component and copy the ScatterSvg
component into your project from here: https://layercake.graphics/example/Scatter.
from layercake.
For example, import the
Svg
layout component and copy theScatterSvg
component into your project from here: https://layercake.graphics/example/Scatter.
Ah, I guess I missed that initially. I can't test it for a few days, but this is almost certainly my issue.
from layercake.
Sounds good. If you do have the time to post a minimal reproduction, I've wanted to play around with SvelteKit + Tauri so it would be informative to see what your setup is.
from layercake.
Sounds good. If you do have the time to post a minimal reproduction, I've wanted to play around with SvelteKit + Tauri so it would be informative to see what your setup is.
Just published my (very much WIP!) application: https://github.com/kdumontnu/clouseau
Thanks for your help!
from layercake.
Ah great! I’m glad it worked out!
from layercake.
Related Issues (20)
- Should auto-calculated ordinal domain return sorted? HOT 3
- Sorted ordinal regression HOT 14
- Collapsible tree HOT 3
- Migrate to Runes HOT 6
- Update to SvelteKit 2 HOT 2
- Question: is it NOT meant to be used with TypeScript? HOT 4
- Scatter plot with two dataset HOT 9
- Add prop to not sort a calculated domain from ordinal scale HOT 1
- Tick position on new Axis Y.html component is slightly off for bandwidth scales
- Deprecate `extents` prop perhaps? HOT 8
- examples: Modify components to support negative bars and columns
- How to handle combo charts? HOT 2
- Add option to suppress negative dimension warning. HOT 1
- Missing rollup package causing CI to fail HOT 1
- Cannot click on code files in examples website
- MultiLine doesn't render lines with undefined points HOT 6
- Add a prop to HTML Axis components to use pixels and not percentages HOT 1
- Remove percentages from annotation example HOT 1
- Remove `$:` from function definitions HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from layercake.