使用 CSS 设计 d3.js 不应用 CSS 样式

问题描述 投票：0回答：2

我正在编写这段代码，它从 .JSON 获取一些数据（目前嵌入在代码中），然后绘制一些带有文本和一些连接线的框。 当我设置某种调试标志时，我想查看文本周围的边界框。

这是相关代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }

    svg {
      display: block;
    }

    .label {
      text-anchor: middle;
      alignment-baseline: middle;
      font-family: Arial, sans-serif;
      font-size: 12px;
    }

    .label .debugBoundingBox {
      fill: none; /* Transparent fill */
      stroke-width: 0.5;
      stroke: #ccc;
      stroke-dasharray: 1, 1;
    }

    .connection {
      stroke: #e74c3c; /* Red color for connection */
      stroke-width: 2;
      stroke-dasharray: 5, 5; /* Add dashed line effect */
    }
  </style>
  <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

<svg id="dot-sequence"></svg>

<script>
  class Label {
    constructor(name, x, y, text) {
      this.name = name;
      this.x = parseInt(x); // Parse coordinates as integers
      this.y = parseInt(y);
      this.text = text;
    }

    draw(svg, showDebugBoundingBox) {
      const textElement = svg.append("text")
        .attr("class", "label")
        .attr("x", this.x)
        .attr("y", this.y)
        .text(this.text);

      const bbox = textElement.node().getBBox();

      if (showDebugBoundingBox) {
        const debugBBox = svg.append("rect")
          .attr("x", bbox.x)
          .attr("y", bbox.y)
          .attr("width", bbox.width)
          .attr("height", bbox.height)
          .attr("class", "label debugBoundingBox")
      }
    }
  }

  class Connection {
    constructor(label1, label2) {
      this.label1 = label1;
      this.label2 = label2;
    }

    draw(svg) {
      svg.insert("line", ":first-child") // Insert line as the first child
        .attr("class", "connection")
        .attr("x1", this.label1.x)
        .attr("y1", this.label1.y)
        .attr("x2", this.label2.x)
        .attr("y2", this.label2.y)
        .attr("stroke-dasharray", "5, 5") // Add dashed line effect
        .attr("stroke", "#e74c3c"); // Set red color for connection
    }
  }

  function composer(labelData, connectionData, showDebugBoundingBox) {
    const svg = d3.select("#dot-sequence")
      .attr("width", 500)
      .attr("height", 150);

    const labels = labelData.map(data => new Label(data.name, data.x, data.y, data.text));

    // Create connections and draw them
    connectionData.forEach(data => {
      const label1 = labels.find(label => label.name === data.start);
      const label2 = labels.find(label => label.name === data.end);

      if (label1 && label2) {
        const connection = new Connection(label1, label2);
        connection.draw(svg);
      }
    });

    // Draw labels after connections
    labels.forEach(label => label.draw(svg, showDebugBoundingBox));
  }

  const labelDataJSON = [
    { "name": "label1", "x": "50", "y": "50", "text": "Text 1" },
    { "name": "label2", "x": "150", "y": "100", "text": "Text 2" },
    { "name": "label3", "x": "250", "y": "50", "text": "Text 3" },
    { "name": "label4", "x": "350", "y": "100", "text": "Text 4" },
    { "name": "label5", "x": "450", "y": "50", "text": "Text 5" }
  ];

  const connectionDataJSON = [
    { "start": "label1", "end": "label2" },
    { "start": "label2", "end": "label3" },
    { "start": "label3", "end": "label4" },
    { "start": "label4", "end": "label5" }
  ];

  const showDebugBoundingBox = true; // Set to true to show debug boxes, false to hide
  composer(labelDataJSON, connectionDataJSON, showDebugBoundingBox);
</script>

</body>
</html>

我的目标是在文本周围设置边框样式，但现在我只能看到一个黑色框覆盖我的文本。

但是如果我改变这一段：

  if (showDebugBoundingBox) {
    const debugBBox = svg.append("rect")
      .attr("x", bbox.x)
      .attr("y", bbox.y)
      .attr("width", bbox.width)
      .attr("height", bbox.height)
      .attr("class", "label debugBoundingBox")
      .attr("fill", "none") // Set fill to none
      .style("stroke-width", 0.5)
      .style("stroke", "#ccc")
      .attr("stroke-dasharray", "1, 1");
  }

一切都如我所愿。为什么我不能在那里使用 .CSS 样式？

谢谢你

javascript html css svg d3.js
2个回答
0
投票

您的 CSS 选择器是 

.label .debugBoundingBox
，这意味着 
.debugBoundingBox
是 
.label
的后代。您需要 
.label.debugBoundingBox
，这意味着应用了两个类的元素。

0
投票

我创建这个游乐场是为了更好地理解，现在根据解决我的问题的答案，现在很明显我的错：https://stackoverflow.com/a/77802702/2071273

<!DOCTYPE html>
<html>
<head>
<style>
.myRectangle1.myRectangle2 {
  fill: rgb(255,0,0);
  stroke-width: 3;
  stroke: rgb(0,0,0);
}

.myRectangle1 .myRectangle2 {
  fill: rgb(0,255,0);
  stroke-width: 2;
  stroke: rgb(0,0,0);
}

.myRectangle1 {
  fill: rgb(0,0,255);
  stroke-width: 1;
  stroke: rgb(0,0,0);
}

.myRectangle2 {
  fill: rgb(255,255,0);
  stroke-width: 4;
  stroke: rgb(0,0,0);
}
</style>
</head>
<body>

<h2>SVG Rectangles with CSS</h2>

<svg width="400" height="180">
  <rect class="myRectangle1 myRectangle2" width="300" height="100" x="50" y="40" />
</svg>

<svg class="myRectangle1" width="400" height="180">
  <rect class="myRectangle2" width="300" height="100" x="50" y="40" />
</svg>

<svg width="400" height="180">
  <rect class="myRectangle1" width="300" height="100" x="50" y="40" />
  <rect class="myRectangle2" width="200" height="80" x="100" y="70" />
</svg>

</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.