Replies: 3 comments 4 replies
-
|
This was actually not too bad. I haven't done the axis yet but here's an example: https://svelte.dev/repl/244d11f1a56949e7956865ff0f2fdbbd?version=3.46.2 edit: I tweaked it so that the range of the rScale (used for subgroups) is now the bandwidth of the xScale. I don't really love how this is done in the But an even better approach would be to be able to define that in the |
Beta Was this translation helpful? Give feedback.
-
|
Here's another approach where you create the scale yourself and keep it in sync with the chart-container. The downside is you have to recreate the padding convention yourself and also calculate the domain https://svelte.dev/repl/b03925c03ab24c6ab0f046dbea312def?version=3.46.2 |
Beta Was this translation helpful? Give feedback.
-
|
I converted this to a discussion. I wonder if the best way to handle this would be to add a new prop called <LayerCake
padding={{ top: 0, right: 10, bottom: 20, left: 20 }}
x={xKey}
y={yKey}
r={subgroupKey}
yDomain={[0, null]}
xScale={scaleBand().paddingInner(0.1).round(true)}
rScale={scaleBand().paddingInner(0).round(true)}
rDomain={subgroupNames}
linkScales={{
r: {
basis: 'x', // could also be an array
scale: (rScale, { xScale }) => {
rScale.range([0, xScale.bandwidth()]);
return rScale;
}
}
}}
data={groups}
{flatData}
>I don't think this can be accomplished with the current API because you'd have to change the order in which the scales are created and understand the dependency tree, which seems like too much to figure out. What's nice about this is it lets you still get all of the same auto-calculated values as you normally would. Another API would be to have |
Beta Was this translation helpful? Give feedback.
-
|
Hey @mhkeller, sorry I've been running around a good bit this week and haven't caught up on the thread completely, but it sounds like you're running into similar issues/improvements to make it easier to derived 1 scale from another ( A few older discussions on this topic Having these derived scales calculated and available on the LayerCake context would make things much nicer, including for tooltips (more of a LayerChart need) and components within the context (labels, for example). I've also been experimenting with improvements to LayerCake (Chart and layout components) that I need for LayerChart and have been meaning to sync up with you, I've just been buried under too many items, and trying to finish what I have in the air before I kick up something new. :) Would you be interested in doing a video chat in the next few weeks? |
Beta Was this translation helpful? Give feedback.
-
|
Funny that I repeated almost verbatim what you ran into in this comment in #29. To address your derived scale question, I wonder if you could expand this syntax where if the key in the Send me an email and we'll coordinate a good time! |
Beta Was this translation helpful? Give feedback.
-
|
Playing around with a prop like this... linkScales={{
rScale: ({ xScale, rScale }) => {
rScale.range([0, xScale.bandwidth()]);
return rScale;
}
}}... is a bit hard with the current code since each scale is a $: if ($_linkScales.rScale) {
$rScale_d = $_linkScales.rScale({
xScale: $xScale_d,
yScale: $yScale_d,
zScale: $zScale_d,
rScale: $rScale_d
});
}You could perhaps create new scales altogether, though... const newScales = {};
$: if ($_linkScales) {
for (const [name, fn] of Object.entries($_linkScales)) {
newScales[name] = fn({
xScale: $xScale_d.copy(),
yScale: $yScale_d.copy(),
zScale: $zScale_d.copy(),
rScale: $rScale_d.copy()
})
}
}
$: context = {
...newScales,
// the rest...
} |
Beta Was this translation helpful? Give feedback.
-
|
Here's an implementation on a branch: https://github.com/mhkeller/layercake/compare/derive-scales?expand=1 |
Beta Was this translation helpful? Give feedback.
- 7C2A
Uh oh!
There was an error while loading. Please reload this page.
-
@techniq I know you've done this in in LayerChart. Do you have any layercake-only example that you'd be able to contribute based on what you've learned doing that?
Beta Was this translation helpful? Give feedback.
All reactions