如何将 CSS 样式 sheet 应用于 D3 力导向图？

Question

编辑：似乎不容易将 SemanticUI 样式应用于 SVG 元素。接受的答案提供了对原始代码的更正和一些解决方法的想法。

我是 quiWeb 开发新手。我正在尝试使用 d3.js 创建一个图形，我希望根据 SemanticUI 样式表的“ui button tiny blue”class 设置节点的样式。但是，当我将此 class 添加到 svg 中的节点时，它们并没有全部显示出来。在浏览器中检查它们告诉我样式已正确应用，但内容框由于某种原因具有负高度和宽度。 svg 外的“TEST_NODE”按预期显示。我做错了什么？

带有内联 js 脚本的 html 文档：

<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v2.min.js?2.9.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<style>

    .link {
        stroke: #aaa;
    }

</style>
<body>

<div class="content">
    <div class="ui button tiny blue">TEST_NODE</div>
</div>


<script>
    $(document).ready(function (){
        var width = 960,
            height = 500

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

        var force = d3.layout.force()
            .gravity(.05)
            .distance(100)
            .charge(-100)
            .size([width, height]);

        d3.json("d3_test.json", function(json) {
            force
                .nodes(json.nodes)
                .links(json.links)
                .start();

            var link = svg.selectAll(".link")
                .data(json.links)
                .enter().append("line")
                .attr("class", "link");

            var node = svg.selectAll(".node")
                .data(json.nodes)
                .enter()
                .append("g")
                .call(force.drag);

            node.append("div")
                .attr("class", "ui button tiny blue")
                .text("NODE")


            force.on("tick", function() {
                link.attr("x1", function(d) { return d.source.x; })
                    .attr("y1", function(d) { return d.source.y; })
                    .attr("x2", function(d) { return d.target.x; })
                    .attr("y2", function(d) { return d.target.y; });

                node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
            });
        });
    });

</script>

</body>

Answer 1

您的代码有 2 个错误：

Class。通过以下方式修复：

const node = svg.selectAll(".node")
  .data(json.nodes)
  .enter()
  .append("g")
  .classed("node", true)
  .call(force.drag);

您不能在 <g> 下创建 <div>。您可以附加一个 <text>:

node.append('rect')
  .attr('x', -50)
  .attr('y', -30)
  .attr('width', 100)
  .attr('height', 60)
  .style('fill', 'blue');

node.append('text')
  .classed('ui ...', true)
  .text('NODE')
  .attr('alignment-baseline', 'middle')
  .attr('text-anchor', 'middle')
  .style('fill', 'white');

... 或在 <foreignObject> 下插入一个 <div>；

如何将 CSS 样式 sheet 应用于 D3 力导向图？

How to apply a CSS style sheet to a D3 force-directed graph?

javascript

css

d3.js

semantic-ui-css