D3.js实现简洁实用的动态仪表盘的示例

下面我将为您详细讲解“D3.js实现简洁实用的动态仪表盘的示例”的完整攻略。

1. 确定设计

在使用D3.js创建仪表盘之前，需要对仪表盘进行设计。

仪表盘可以包含以下元素：
- 指示器（需要动态变化）
- 舞台或背景
- 刻度盘或表盘

2. 创建SVG容器

D3.js将仪表盘绘制到SVG容器中。首先，需要创建一个SVG元素，并设定其宽度和高度。

<div id="gauge">
  <svg width="300" height="200"></svg>
</div>

const svg = d3.select("#gauge svg");

3. 绘制舞台

在D3.js中，绘制一个矩形代表仪表盘的舞台或背景。

svg.append("rect")
  .attr("class", "bg")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", width)
  .attr("height", height);

4. 绘制刻度盘

绘制刻度盘需要确定刻度的数量和角度。可以使用D3.js的弧形函数d3.arc来绘制每个刻度的弧形。

const gauge = {
  min: 0,
  max: 100,
  range: function () { return this.max - this.min; },
  majorTicks: 5,
  minorTicks: 5,
  transitionDuration: 1000
};

const gaugeArc = d3.arc()
  .innerRadius(60)
  .outerRadius(80)
  .startAngle(-Math.PI / 2)
  .endAngle(Math.PI / 2);

const ticks = [];
for (let i = 0; i <= gauge.majorTicks; i++) {
  const tick = { angle: -Math.PI / 2 + i / gauge.majorTicks * Math.PI };
  tick.xp = Math.cos(tick.angle);
  tick.yp = Math.sin(tick.angle);
  ticks.push(tick);
}

svg.append("g")
  .attr("class", "ticks")
  .selectAll("path")
  .data(ticks)
  .enter().append("path")
  .attr("d", function (d) {
    const start = [d.xp * 80, d.yp * 80];
    const end = [d.xp * 70, d.yp * 70];
    return ["M", start, "L", end].join(" ");
  });

5. 绘制指针

类似地，使用D3.js的线条函数d3.line绘制指针。指针的角度与指示器的值相关联。

const value = 60;

const pointer = svg.append("g")
  .attr("class", "pointer")
  .datum({ angle: -Math.PI / 2 })
  .append("path")
  .attr("d", d3.line()([
    [0, -10],
    [5, 0],
    [0, 80],
    [-5, 0],
    [0, -10]
  ]))
  .attr("transform", function (d) {
    return "rotate(" + (d.angle * 180 / Math.PI) + ")";
  });

function updatePointer(value) {
  const ratio = value / gauge.range();
  const angle = -Math.PI / 2 + ratio * Math.PI;
  pointer.transition()
    .duration(gauge.transitionDuration)
    .attrTween("transform", function () {
      return d3.interpolateString("rotate(" + (pointer.datum().angle * 180 / Math.PI) + ")", "rotate(" + (angle * 180 / Math.PI) + ")");
    })
    .on("end", function () { pointer.datum({ angle }); });
}

示例1：矩形仪表盘

下面是一个使用以上攻略，以矩形舞台为基础的简洁仪表盘示例。

const svg = d3.select("#example1")
  .append("svg")
  .attr("viewBox", [0, 0, 200, 100]);

const gauge = {
  min: 0,
  max: 100,
  range: function () { return this.max - this.min; },
  majorTicks: 5,
  minorTicks: 5,
  transitionDuration: 1000
};

svg.append("rect")
  .attr("class", "bg")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", 200)
  .attr("height", 100);

const gaugeArc = d3.arc()
  .innerRadius(30)
  .outerRadius(40)
  .startAngle(-Math.PI / 2)
  .endAngle(Math.PI / 2);

const ticks = [];
for (let i = 0; i <= gauge.majorTicks; i++) {
  const tick = { angle: -Math.PI / 2 + i / gauge.majorTicks * Math.PI };
  tick.xp = Math.cos(tick.angle);
  tick.yp = Math.sin(tick.angle);
  ticks.push(tick);
}

svg.append("g")
  .attr("class", "ticks")
  .selectAll("path")
  .data(ticks)
  .enter().append("path")
  .attr("d", function (d) {
    const start = [d.xp * 40 + 100, d.yp * 40 + 50];
    const end = [d.xp * 30 + 100, d.yp * 30 + 50];
    return ["M", start, "L", end].join(" ");
  });

const pointer = svg.append("g")
  .attr("class", "pointer")
  .datum({ angle: -Math.PI / 2 })
  .append("path")
  .attr("d", d3.line()([
    [100, 40],
    [105, 50],
    [100, 70],
    [95, 50],
    [100, 40]
  ]))
  .attr("transform", function (d) {
    return "rotate(" + (d.angle * 180 / Math.PI) + ", 100, 50)";
  });

function updatePointer(value) {
  const ratio = value / gauge.range();
  const angle = -Math.PI / 2 + ratio * Math.PI;
  pointer.transition()
    .duration(gauge.transitionDuration)
    .attrTween("transform", function () {
      return d3.interpolateString("rotate(" + (pointer.datum().angle * 180 / Math.PI) + ", 100, 50)", "rotate(" + (angle * 180 / Math.PI) + ", 100, 50)");
    })
    .on("end", function () { pointer.datum({ angle }); });
}

updatePointer(80);

示例2：圆形仪表盘

以下是基于圆形舞台设计的示例。

const svg = d3.select("#example2")
  .append("svg")
  .attr("viewBox", [-50, -50, 100, 100]);

const gauge = {
  min: 0,
  max: 100,
  range: function () { return this.max - this.min; },
  majorTicks: 5,
  minorTicks: 5,
  transitionDuration: 1000
};

svg.append("circle")
  .attr("class", "bg")
  .attr("cx", 0)
  .attr("cy", 0)
  .attr("r", 50);

const gaugeArc = d3.arc()
  .innerRadius(30)
  .outerRadius(40)
  .startAngle(-Math.PI / 2)
  .endAngle(Math.PI / 2);

const ticks = [];
for (let i = 0; i <= gauge.majorTicks; i++) {
  const tick = { angle: -Math.PI / 2 + i / gauge.majorTicks * Math.PI };
  tick.xp = Math.cos(tick.angle);
  tick.yp = Math.sin(tick.angle);
  ticks.push(tick);
}

svg.append("g")
  .attr("class", "ticks")
  .selectAll("path")
  .data(ticks)
  .enter().append("path")
  .attr("d", function (d) {
    const start = [d.xp * 40, d.yp * 40];
    const end = [d.xp * 30, d.yp * 30];
    return ["M", start, "L", end].join(" ");
  });

const pointer = svg.append("g")
  .attr("class", "pointer")
  .datum({ angle: -Math.PI / 2 })
  .append("path")
  .attr("d", d3.line()([
    [0, -10],
    [5, 0],
    [0, 40],
    [-5, 0],
    [0, -10]
  ]))
  .attr("transform", function (d) {
    return "rotate(" + (d.angle * 180 / Math.PI) + ")";
  });

function updatePointer(value) {
  const ratio = value / gauge.range();
  const angle = -Math.PI / 2 + ratio * Math.PI;
  pointer.transition()
    .duration(gauge.transitionDuration)
    .attrTween("transform", function () {
      return d3.interpolateString("rotate(" + (pointer.datum().angle * 180 / Math.PI) + ")", "rotate(" + (angle * 180 / Math.PI) + ")");
    })
    .on("end", function () { pointer.datum({ angle }); });
}

updatePointer(80);

这便是使用D3.js实现简洁实用的动态仪表盘的攻略和示例。