列出D3的所有交互方法，并给出示例

news2024/11/22 19:08:36

D3.js 提供了丰富的交互方法，可以用来增强图表的用户交互体验。以下是一些常用的交互方法及其示例：

1. 鼠标事件

`on("mouseover", function)`

用途: 当鼠标悬停在元素上时触发。

示例:

svg.selectAll(".bar")
  .on("mouseover", function(event, d) {
    d3.select(this)
      .attr("fill", "brown");
  });

`on("mouseout", function)`

用途: 当鼠标离开元素时触发。

示例:

svg.selectAll(".bar")
  .on("mouseout", function(event, d) {
    d3.select(this)
      .attr("fill", "steelblue");
  });

`on("click", function)`

用途: 当元素被点击时触发。

示例:

svg.selectAll(".bar")
  .on("click", function(event, d) {
    alert(`Clicked on bar with value: ${d.value}`);
  });

`on("dblclick", function)`

用途: 当元素被双击时触发。

示例:

svg.selectAll(".bar")
  .on("dblclick", function(event, d) {
    alert(`Double-clicked on bar with value: ${d.value}`);
  });

2. 拖拽事件

使用 `d3.drag()`

用途: 实现元素的拖拽功能。

示例:

const drag = d3.drag()
  .on("start", dragstarted)
  .on("drag", dragged)
  .on("end", dragended);

svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx", d => xScale(d.x))
  .attr("cy", d => yScale(d.y))
  .attr("r", 5)
  .call(drag);

function dragstarted(event, d) {
  d3.select(this).raise().attr("stroke", "black");
}

function dragged(event, d) {
  d.x = event.x;
  d.y = event.y;
  d3.select(this)
    .attr("cx", d.x)
    .attr("cy", d.y);
}

function dragended(event, d) {
  d3.select(this).attr("stroke", null);
}

3. 缩放和平移

使用 `d3.zoom()`

用途: 实现图表的缩放和平移功能。

示例:

const zoom = d3.zoom()
  .scaleExtent([1, 10])
  .on("zoom", handleZoom);

svg.call(zoom);

function handleZoom(event) {
  const newTransform = event.transform;
  svg.selectAll(".bar")
    .attr("transform", newTransform);
}

4. 刷选和过滤

在这里插入图片描述

使用 `d3.brush()`

用途: 实现图表的刷选功能。

示例:

const brush = d3.brushX()
  .extent([[0, 0], [width, height]])
  .on("end", handleBrush);

svg.append("g")
  .attr("class", "brush")
  .call(brush);

function handleBrush(event) {
  const selection = event.selection;
  if (selection) {
    const [[x0], [x1]] = selection;
    const filteredData = data.filter(d => xScale(d.x) >= x0 && xScale(d.x) <= x1);
    console.log(filteredData);
  }
}

5. 动画

使用 `transition()`

用途: 实现元素的平滑动画效果。

示例:

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("x", d => xScale(d.label))
  .attr("y", height)
  .attr("width", xScale.bandwidth())
  .attr("height", 0)
  .transition()
  .duration(1000)
  .attr("y", d => yScale(d.value))
  .attr("height", d => height - yScale(d.value));

6. 工具提示

使用 `d3-tip`

用途: 显示工具提示。

示例:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js"></script>

const tip = d3.tip()
  .attr("class", "d3-tip")
  .offset([-10, 0])
  .html(d => `<strong>Value:</strong> <span style='color:red'>${d.value}</span>`);

svg.call(tip);

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("x", d => xScale(d.label))
  .attr("y", d => yScale(d.value))
  .attr("width", xScale.bandwidth())
  .attr("height", d => height - yScale(d.value))
  .on("mouseover", tip.show)
  .on("mouseout", tip.hide);