EDIT：似乎不容易将SemanticUI样式应用于SVG元素。接受的答案提供了对原始代码的更正以及一些变通方法的想法
我对网络开发很陌生。我正在尝试使用d3.js创建一个图，我希望节点根据"；ui按钮小蓝"；SemanticUI样式表的类。然而，当我将这个类添加到svg中的节点时，它们并没有全部显示出来。在浏览器中检查它们告诉我样式应用正确，但由于某种原因，内容框的高度和宽度为负。"；TEST_NODE"；svg的外部会按预期显示。我做错了什么？
带有内联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>
您的代码有两个错误：
- 节点元素缺少类。修复方法：
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');
或者在CCD_ 5下插入CCD_；