/
githubmirror
/
d3
Обзор
Документация
Войти
/
githubmirror
/
d3
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
docs/components/ExampleAxis.vue
32 строки
781 B
Philippe Rivière
an intro for axis, and a clickable easter egg (#3680)
16 июн 2023, 23:41
Не верифицирован
16 июн 2023, 23:41
9e65768
Код
Авторство
О чём код?
<script setup> import * as d3 from "d3"; import {defineProps, ref, onMounted, onUpdated} from "vue"; const props = defineProps({ axis: true, width: {type: Number, default: 688}, height: {type: Number, default: 30}, x: {type: Number, default: 0}, y: {type: Number, default: 0}, duration: {type: Number, default: 250} }); const g = ref(); onMounted(() => { d3.select(g.value).call(props.axis); }); onUpdated(() => { d3.select(g.value).transition().duration(props.duration).call(props.axis); }); </script> <template> <div style="margin: 1em 0;"> <svg :width="width" :height="height" :viewBox="[0, 0, width, height].join(' ')" style="max-width: 100%; height: auto;"> <g :transform="`translate(${x},${y})`" ref="g"></g> </svg> </div> </template>