mirror of
https://github.com/d3/d3.git
synced 2025-12-08 19:46:24 +00:00
6d6c6792f1
* checkpoint vitepress docs * edits * edits * hero drop shadow * d3-array edits * resolve d3 * split d3-array * move d3-array stuff around * d3-array is collapsed: true * italicize parameter names * searching edits * update dependencies * d3-array edits * array edits * array edits * array edits * array edits * array edits * move files * array edits * array edits * array edits * getting started edits * modules page * array edits * more structure * live example * dsv edits * fetch edits * dsv edits * random edits * time format edits * time edits * time edits * modules edits * color edits * color edits * interpolate edits * scale-chromatic edits * selection edits * break up d3-interpolate * scale edits * time scale edits * scale edits * scale edits * band edits * band edits * more descriptive titles * band and point edits * sequential edits * diverging edits * quantize edits * quantile edits * threshold edits * doc edits * fix titles * sequential edits * axis edits * axis edits * axis edits * shape edits * shape edits * dark mode chart * dark mode chart * curve edits * interpolate edits * line edits * link edits * radial edits * pie edits * symbol edits * stack edits * stack examples * path edits * polygon edits * quadtree edits * random examples * ease edits * ease edits * ease edits * timer edits * delaunay edits * quadtree find example * voronoi edits * dispatch edits * contour edits * chord edits * chord edits * fix find highlight * quadtree animation * transition edits * transition edits * transition edits * zoom edits * drag edits * brush edits * force edits * voronoi neighbors example * hierarchy edits * api edits * community edits * getting started edits * geo edits * Add short "D3 in React" section (#3659) * Add short "D3 in React" section I know you removed the TODO but I was already trying to fill it in! I think just making the distinction of modules that touch the DOM and those that don't was super clarifying for me personally when I figured that out. And I always forget the most basic ref pattern (and still might've messed it up here). I don't think we should get into updating or interactivity or whatever, but I think just this much goes a long way toward demystifying (and showing just the most basic best practices). * forgot i made data generic, rm reference to normal distribution * useEffect cleans up after itself Co-authored-by: Mike Bostock <mbostock@gmail.com> * Update getting-started.md --------- Co-authored-by: Mike Bostock <mbostock@gmail.com> * build fixes * index edits --------- Co-authored-by: Toph Tucker <tophtucker@gmail.com>
36 lines
1.2 KiB
Vue
36 lines
1.2 KiB
Vue
<script setup>
|
|
|
|
import * as Plot from "@observablehq/plot";
|
|
import PlotRender from "./PlotRender.js";
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
props: {
|
|
label: {type: String, optional: true},
|
|
curves: {type: Array, optional: true, default: []},
|
|
points: {type: Array, optional: true, default: [[100, 200], [180, 80], [240, 40], [280, 40], [340, 160], [460, 160], [540, 80], [640, 120], [700, 160], [760, 140], [820, 200]]} // [[100, 200], [340, 200], [460, 160], [460, 120], [420, 80], [580, 40], [820, 40]]
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<PlotRender :defer='curves.length > 1' :options='{
|
|
aspectRatio: 1,
|
|
axis: null,
|
|
x: {type: "linear", domain: [60, 860]},
|
|
y: {type: "linear", domain: [240, 0]},
|
|
color: curves.length > 1 ? {type: "linear", domain: [0, 1], label, scheme: "purd", range: [0.25, 1], legend: true} : undefined,
|
|
marks: [
|
|
Plot.frame({fill: "currentColor", fillOpacity: 0.08}),
|
|
Plot.gridX({tickSpacing: 20, color: "var(--vp-c-bg)", opacity: 1}),
|
|
Plot.gridY({tickSpacing: 20, color: "var(--vp-c-bg)", opacity: 1}),
|
|
curves.map((curve) => Plot.line(points, {stroke: curves.length > 1 ? curve.tension : undefined, ...curve})),
|
|
Plot.dot(points)
|
|
]
|
|
}' />
|
|
</template>
|