D3.jsとVue.jsを統合したインタラクティブなデータビジュアライゼーション

// D3.jsの基本的な使用例
import * as d3 from 'd3';

// Vue.jsの基本構造
const app = Vue.createApp({
  data() {
    return { message: 'Hello Vue!' };
  },
}).mount('#app');

// D3とVueの統合
onMounted(() => {
  d3.select('#chart').append('svg')
    .attr('width', 500)
    .attr('height', 500);
});

// データバインディングの例
const data = [10, 20, 30];
d3.select('svg')
  .selectAll('circle')
  .data(data)
  .enter()
  .append('circle');

// マウスイベントの追加
d3.selectAll('circle')
  .on('mouseover', (event, d) => {
    console.log('Hovered:', d);
  });

// VueコンポーネントでD3を使用
app.component('d3-chart', {
  template: '<div id="chart"></div>'
});

// D3のスケール関数
const x = d3.scaleLinear().domain([0, 100]).range([0, 500]);

// D3アニメーション
circle.transition()
  .duration(1000)
  .attr('r', 20);

// データの動的更新
function updateData(newData) {
  d3.selectAll('circle').data(newData).attr('r', d => d);
}

// VueでD3イベントを管理
onUnmounted(() => {
  d3.selectAll('circle').on('mouseover', null);
});

// 複雑なチャートの例
const line = d3.line().x(d => d.x).y(d => d.y);

// パフォーマンス最適化
useMemo(() => {
  return d3.select('#chart').node();
});