JointJS中Link的strokeWidth设置不生效问题排查与解决

问题描述 #

用JointJS制作图表时，明明将Link的strokeWidth属性设置为1，但渲染后的线条实际显示宽度却像设置了10一样，视觉上明显过粗，不符合预期。

相关代码片段：

import "./join-tool.css";
import { dia, shapes } from "jointjs";

export class JointJSBlock {
  static get toolbox() {
    return {
      title: "Diagram",
      icon: "<svg>...</svg>", // 可添加自定义图标或使用预定义SVG
    };
  }

  constructor({ data }) {
    this.data = data || { graph: {} };
    this.wrapper = null;
    this.graph = new dia.Graph();
    this.paper = null;
  }

  render() {
    this.wrapper = document.createElement("div");
    this.wrapper.classList.add("jointjs-block");

    // 创建JointJS画布容器
    const diagramContainer = document.createElement("div");
    diagramContainer.classList.add("jointjs-paper-container");
    this.wrapper.appendChild(diagramContainer);

    // 初始化JointJS画布
    this.paper = new dia.Paper({
      el: diagramContainer,
      model: this.graph,
      width: "100%",
      height: 800,
      gridSize: 10,
      drawGrid: true,
      background: { color: "#F5F5F5" },
      cellViewNamespace: shapes,
    });

    // 加载已保存的图表数据（如果存在）
    if (this.data.graph) {
      this.graph.fromJSON(this.data.graph);
    } else {
      this._addDefaultShapes();
    }

    return this.wrapper;
  }

  _addDefaultShapes() {
    // 矩形1
    const rect1 = new shapes.standard.Rectangle();
    rect1.position(50, 50);
    rect1.resize(100, 40);
    rect1.attr({
      body: { fill: "blue" },
      label: { text: "Rect1", fill: "white" },
    });
    rect1.addTo(this.graph);

    // 矩形2
    const rect2 = new shapes.standard.Rectangle();
    rect2.position(200, 50);
    rect2.resize(100, 40);
    rect2.attr({
      body: { fill: "red" },
      label: { text: "Rect2", fill: "white" },
    });
    rect2.addTo(this.graph);

    // 连接矩形的Link
    const link = new shapes.standard.Link();
    link.source(rect1);
    link.target(rect2);
    link.attr({
      line: {
        stroke: "#000000", // 线条颜色
        strokeWidth: 1, // 线条宽度（设置为1但显示异常）
      },
    });
    link.addTo(this.graph);
  }

  save(blockContent) {
    // 保存图表数据
    return {
      graph: this.graph.toJSON(),
    };
  }
}

问题原因 #

1. 旧保存数据覆盖新设置：如果this.data.graph中保存过strokeWidth为10的Link数据，调用graph.fromJSON会直接加载旧属性值，覆盖你在_addDefaultShapes中设置的新值。
2. CSS全局样式冲突：自定义的join-tool.css中可能存在全局SVG样式，比如svg * { stroke-width: 10; }，这种全局规则会强制覆盖JointJS通过属性设置的线条宽度。
3. 容器/画布被缩放：如果JointJS的容器被CSS设置了transform: scale()，或者Paper本身配置了scale属性大于1，线条会被视觉放大。

解决方案 #

1. 清除旧数据的影响 #

如果需要保留旧图表结构但重置线条宽度，在加载旧数据后遍历所有Link并重置属性：

if (this.data.graph) {
  this.graph.fromJSON(this.data.graph);
  // 遍历所有Link，强制设置strokeWidth为1
  this.graph.getLinks().forEach(link => {
    link.attr('line/strokeWidth', 1);
  });
} else {
  this._addDefaultShapes();
}

测试阶段可以先注释掉graph.fromJSON代码，确认是否是旧数据导致的问题。

2. 修复CSS样式冲突 #

检查join-tool.css，删除或修改全局SVG的stroke-width设置。如果需要针对性设置样式，给JointJS容器添加隔离规则：

/* 确保JointJS的SVG元素继承自身属性，不被全局样式覆盖 */
.jointjs-paper-container svg * {
  stroke-width: inherit !important;
}

3. 排查容器缩放 #

确认以下两点：

• Paper初始化时没有设置scale属性（默认值为{ x: 1, y: 1 }，不要改成大于1的数值）。
• 容器元素（.jointjs-paper-container）没有被CSS的transform: scale()或zoom属性缩放。

内容的提问来源于stack exchange，提问作者Avinash A